title: React native useCallback change state by useSelector
body: <p><a href="https://i.stack.imgur.com/QxMzc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QxMzc.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/iuT7D.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iuT7D.gif" alt="enter image description here" /></a></p>
  <p>I take with <code>useSelector</code> the status of the theme type I need, which I find in<code> settings.item.colorScheme</code>.</p>
  <p>I have a <code>BottomSheet</code> which allows me that clicking on the selected language to change it, this change changes the status of <code>redux</code> so also of <code>settings</code> taken with <code>useSelector</code>.</p>
  <p>The problem is that the state inside the <code>useCallback</code> doesn't change, at least it only changes when the <code>bottomSheet</code> menu is closed and then reopened.</p>
  <p>How can I do that inside what is defined inside <code>useCallback</code> see the updated status?</p>
  <p>I tried to pass it as an argument to the <code>useCallback</code>, but it doesn't work.</p>
  <p>Code:</p>
  <pre><code>  const dispatch = useDispatch();
    const settings = useSelector((state) =&gt; state.settings);
    const { present, dismiss } = useBottomSheetModal();
  
    const theme = [
      { title: 'Light', value: 'light' },
      { title: 'Dark', value: 'dark' }
    ];
  
    const bottomSheetTheme = useCallback(
      (newValue, id) =&gt; {
        present(
          &lt;View style={{ flex: 1, backgroundColor }}&gt;
            &lt;Text&gt;{settings.item.colorScheme}&lt;/Text&gt;
            {theme.map(({ title, value }) =&gt; {
              return (
                &lt;TouchableWithoutFeedback
                  key={value}
                  onPress={() =&gt; {
                    //dismiss();
                    changeButtonTheme(value);
                  }}&gt;
                  &lt;View
                    style={[
                      Layout.row,
                      Layout.rowHCenter,
                      Gutters.tinyVMargin,
                      Gutters.tinyHMargin,
                    ]}&gt;
                    &lt;View style={[Layout.fill]}&gt;
                      &lt;Text&gt;{title}&lt;/Text&gt;
                    &lt;/View&gt;
                    {settings.item.colorScheme === value ? (
                      &lt;Svgs.RadioButton size={32} color={backgroundColor} /&gt;
                    ) : (
                      &lt;Svgs.RadioButtonEmpty size={32} color={backgroundColor} /&gt;
                    )}
                  &lt;/View&gt;
                &lt;/TouchableWithoutFeedback&gt;
              );
            })}
          &lt;/View&gt;,
          {
            snapPoints: ['25%'],
            animationDuration: 10,
            overlayComponent: BottomSheetOverlay,
            overlayOpacity: 0.5,
            dismissOnOverlayPress: true,
            //handleComponent: handle,
            //backgroundComponent: BlurredBackground,
            //onChange: handleChange,
          }
        );
      },
      [settings]
    );
  </code></pre>