How to get state in React function without unnecessary rerender?

[michalvadak]

Hey, is it possible to use the following in the useCallback function to get the current value when the function is triggered, without the need to use useSelector? I don't need to display that state, so I don't want to rerender that component.

 const handleOrientationChange = useCallback(() => {
   const isAutoPlayActive = store.getState().autoPlay.isActive;

   if (isAutoPlayActive) {
     dispatch(stopAutoPlay());
   }
 }, [dispatch]);

[EskiMojo14]

assuming you're getting the store from useStore, rather than importing it directly, yes this is allowed (you'd also need store in the dependency array, just in case). You could also use a thunk instead:

 const handleOrientationChange = useCallback(() => {
   dispatch((dispatch, getState) => {
     const isAutoPlayActive = getState().autoPlay.isActive;

     if (isAutoPlayActive) {
       dispatch(stopAutoPlay());
     }
   });
 }, [dispatch]);

[michalvadak]

@EskiMojo14
Currently I'm importing it directly as it has the correct types. I can switch to useStore but is there a way to inherit the "correct" types?

Is the thunk better?

[EskiMojo14]

If you're using Typescript you should be using pre-typed hooks, which would give it the correct store type.

The thunk is slightly simpler, so I'd stick with it where possible.

It also means you can extract it outside the component, removing the need for the useCallback altogether.

const stopAutoPlayThunk = (): AppThunk => (dispatch, getState) => {
  const isAutoPlayActive = getState().autoPlay.isActive;

  if (isAutoPlayActive) {
    dispatch(stopAutoPlay());
  }
}

function Component() {
  const dispatch = useAppDispatch();
  // then just dispatch(stopAutoPlayThunk())
}

[michalvadak]

I'm using the pre-typed hook but I had it setup only for the useDispatch and useSelector. It's nice the useStore can be typed as well!

That's nice! Thanks!