title: How can I refactor code, to use one function in place of 4 that each uses a special `useState` Hook (i.e. `setAlfaIsTrue(newValue)`)
body: <p>So I have the below code which I would like to refactor, so I will not have to repeat it again and again.
  I made a function <code>saveQuestion</code> but it solves half the problem. I do not have to call 
  <code>setDeleteFilters(true);</code> <code>setFiltersAreApplied(true);</code> again...
  But is there a way to call the saveQuestion function each time with a different hook like once with <code>setAlfaIsTrue(newValue);</code> then with <code>setBetaIsTrue(newValue);</code> etc ?
  The main problem I think is the dependencies...</p>
  
  <p>Thank you :)</p>
  
  <pre><code>const saveQuestion = useCallback(
          () =&gt; {
              setDeleteFilters(true);
              setFiltersAreApplied(true);
          },
          [ deleteFilters, filtersAreApplied ]
      );
  
      const saveAlfa = useCallback(
          (newValue) =&gt; {
              setAlfaIsTrue(newValue);
              saveQuestion();
              // setDeleteFilters(true);
              // setFiltersAreApplied(true);
          },
          [ alfaIsTrue ]
      );
      const saveBeta = useCallback(
          (newValue) =&gt; {
              setBetaIsTrue(newValue);
              saveQuestion();
              // setDeleteFilters(true);
              // setFiltersAreApplied(true);
          },
          [ betaIsTrue ]
      );
  </code></pre>
  
  <p>I got exactly what I wanted from <strong>T.J.Crowder</strong>
  and this is how the code looks now.
  Nice and concise.</p>
  
  <pre><code>const [ saveAlfa, saveBeta, saveGamma, saveDelta ] = [
          setAlfaIsTrue,
          setBetaIsTrue,
          setGammaIsTrue,
          setDeltaIsTrue
      ].map((fn, flag) =&gt;
          useCallback((newValue) =&gt; {
              fn(newValue);
              setDeleteFilters(true);
              setFiltersAreApplied(true);
          }, [flag])
      );
  </code></pre>
  
  <p>thank you
  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
  
  <p>Here is all the code:
  I still need to correct the dependencies...</p>
  
  <pre><code>
  const AnswerSwitch = (props) =&gt; {
      return (
          &lt;View style={styles.multipleChoiceContainer}&gt;
              {/* &lt;Text style={{color:Colours.moccasin_light}} &gt;{props.label}&lt;/Text&gt; */}
              &lt;BoldText&gt;{props.label}&lt;/BoldText&gt;
              &lt;View style={{ marginHorizontal: 10 }}&gt;
                  &lt;Switch
                      style={{ transform: [ { scaleX: 1 }, { scaleY: 0.7 } ] }}
                      thumbColor={Platform.OS === 'android' ? Colours.maroon : ''}
                      trackColor={Platform.OS === 'android' ? Colours.moccasin_light : ''}
                      value={props.state}
                      onValueChange={props.onChange}
                      disabled={props.disabled}
                  /&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      );
  };
  
  ////////////////////////////////////////////////////////
  const DifficultyLevelSettingsScreen = (props) =&gt; {
      const { width, height } = Dimensions.get('window');
      const widthMultiplier = DimensionsForStyle.widthMultiplier;
      const textMultiplier = DimensionsForStyle.textMultiplier;
      const cardHeight = DimensionsForStyle.cardHeight;
      const cardWidth = DimensionsForStyle.cardWidth;
  
      const dispatch = useDispatch();
      const [ isLoading, setIsLoading ] = useState(false);
  
      // For the switches
      // They run when a switch is touched
      const [ alfaIsTrue, setAlfaIsTrue ] = useState(true);
      const [ betaIsTrue, setBetaIsTrue ] = useState(true);
      const [ gammaIsTrue, setGammaIsTrue ] = useState(true);
      const [ deltaIsTrue, setDeltaIsTrue ] = useState(true);
  
      // For checking if we have filters on the server so we set their state from there...
      const [ filtersAreApplied, setFiltersAreApplied ] = useState(false);
  
      // Gets updated everytime we set a filter, so we delete their previous state
      const [ deleteFilters, setDeleteFilters ] = useState(false);
  
      // Get state of filters from redux to update them
      // const savedFilters = useSelector((state) =&gt; state.questions.filters);
  
      const loadFilters = useCallback(
          async () =&gt; {
              const userFilters = await AsyncStorage.getItem('userFilters');
              const savedFilters = JSON.parse(userFilters);
  
              let applySavedFilters = false;
              for (const key in savedFilters) {
                  applySavedFilters = savedFilters[key].filtersAreApplied;
                  // If we have savedFilters and we didn't press a switch then...
  
                  if (applySavedFilters &amp;&amp; !deleteFilters) {
                      setAlfaIsTrue(savedFilters[key].alfa);
                      setBetaIsTrue(savedFilters[key].beta);
                      setGammaIsTrue(savedFilters[key].gamma);
                      setDeltaIsTrue(savedFilters[key].delta);
                      // setFiltersAreApplied(false)
                  }
              }
  
              // Get state of filters to send them to server
              const appliedFilters = {
                  alfa: alfaIsTrue,
                  beta: betaIsTrue,
                  gamma: gammaIsTrue,
                  delta: deltaIsTrue,
                  filtersAreApplied: filtersAreApplied
              };
              // If a switch is touched then 'deleteFilters' will be true.
              if (deleteFilters || savedFilters.filtersAreApplied) {
                  await dispatch(questionsActions.deletePreviousFilters());
                  await dispatch(questionsActions.setFilters(appliedFilters));
              }
  
              // Fetch them again to update the "initial" state of filters...
              // dispatch(questionsActions.fetchFilters());
          },
          [ alfaIsTrue, betaIsTrue, gammaIsTrue, deltaIsTrue, deleteFilters, filtersAreApplied, dispatch ]
      );
  
      // loadFilters after focusing
      useEffect(
          () =&gt; {
              const willFocusEvent = props.navigation.addListener('willFocus', loadFilters);
              return () =&gt; willFocusEvent.remove();
          },
          [ loadFilters ]
      );
  
      // loadFilters initially...
      useEffect(
          () =&gt; {
              setIsLoading(true);
              loadFilters().then(() =&gt; setIsLoading(false));
          },
          [ loadFilters ]
      );
  
      // For setting the email on the HeaderTitle
      useEffect(
          () =&gt; {
              const getData = async () =&gt; {
                  // Note: getItem is asynchronous, so we get a promise
                  await dispatch(questionsActions.fetchAllUsersData());
                  const userData = await AsyncStorage.getItem('userData');
                  if (userData) {
                      // parse converts a string to an object or array
                      const transformedData = JSON.parse(userData);
                      const { userEmail } = transformedData;
                      props.navigation.setParams({ userEmail: userEmail });
                  }
              };
              getData();
          },
          [ dispatch ]
      );
  
      const saveQuestion = useCallback(
          () =&gt; {
              // So filters on server will not be deleted
              // when you open the DifficultyLevelSettingsScreen, unless you make a change.
              setDeleteFilters(true);
              setFiltersAreApplied(true);
          },
          [ deleteFilters, filtersAreApplied ]
      );
  
      // These actions run when the according switch is touched...
      const saveAlfa = useCallback(
          (newValue) =&gt; {
              setAlfaIsTrue(newValue);
              saveQuestion()
          },
          [ alfaIsTrue ]
      );
      const saveBeta = useCallback(
          (newValue) =&gt; {
              setBetaIsTrue(newValue);
              saveQuestion()
          },
          [ betaIsTrue ]
      );
      const saveGamma = useCallback(
          (newValue) =&gt; {
              setGammaIsTrue(newValue);
              saveQuestion()
          },
          [ gammaIsTrue ]
      );
      const saveDelta = useCallback(
          (newValue) =&gt; {
              setDeltaIsTrue(newValue);
              saveQuestion()
          },
          [ deltaIsTrue ]
      );
  
      return (
          // &lt;CustomLinearGradient&gt;
          &lt;ScrollView style={styles.screen}&gt;
              &lt;View style={styles.difficultyLevelStyle}&gt;
                  {isLoading ? (
                      &lt;ActivityIndicator size="small" color={Colours.maroon} /&gt;
                  ) : (
                      &lt;BoldText style={styles.title}&gt;Επιλογή βαθμού (ή βαθμών) δυσκολίας&lt;/BoldText&gt;
                  )}
  
                  &lt;View style={styles.switchesSummary}&gt;
                      &lt;AnswerSwitch
                          state={alfaIsTrue}
                          // onChange={(newValue) =&gt; setAlfaIsTrue(newValue)}
                          onChange={saveAlfa}
                          label="Επίπεδο: Α"
                          // disabled={betaIsTrue || gammaIsTrue || deltaIsTrue}
                      /&gt;
                      &lt;AnswerSwitch
                          state={betaIsTrue}
                          // onChange={(newValue) =&gt; setBetaIsTrue(newValue)}
                          onChange={saveBeta}
                          label="Επίπεδο: Β"
                          // disabled={alfaIsTrue || gammaIsTrue || deltaIsTrue}
                      /&gt;
                      &lt;AnswerSwitch
                          state={gammaIsTrue}
                          // onChange={(newValue) =&gt; setGammaIsTrue(newValue)}
                          onChange={saveGamma}
                          label="Επίπεδο: Γ"
                          // disabled={alfaIsTrue || betaIsTrue || deltaIsTrue}
                      /&gt;
                      &lt;AnswerSwitch
                          state={deltaIsTrue}
                          // onChange={(newValue) =&gt; setDeltaIsTrue(newValue)}
                          onChange={saveDelta}
                          label="Επίπεδο: Δ"
                          // disabled={alfaIsTrue || betaIsTrue || gammaIsTrue}
                      /&gt;
                      &lt;Line /&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          &lt;/ScrollView&gt;
          // &lt;/CustomLinearGradient&gt;
      );
  };
  
  DifficultyLevelSettingsScreen.navigationOptions = ({ navigation }) =&gt; {
      return {
          headerTitle: navigation.getParam('userEmail'),
          headerLeft: (
              &lt;HeaderButtons HeaderButtonComponent={CustomHeaderButton}&gt;
                  &lt;Item
                      title="menu"
                      iconName={Platform.OS === 'android' ? 'md-menu' : 'ios-menu'}
                      onPress={() =&gt; navigation.toggleDrawer()}
                  /&gt;
              &lt;/HeaderButtons&gt;
          )
  
      };
  };
  </code></pre>
  
  <p>There is also an other file with 10 switches...</p>