How to access React Redux value only once?

user_11606097 0
Viewed 1275

I just want to get a value once from the redux store, and use it once inside of a useEffect function.

However useSelector is required to be on the root level of a component, so it is run every render. This means if the value in my redux store is updated, all the child components get updated too.

I don't want that to happen. (For some reason, the redux update is interrupting some of my animations). I only want it to access useSelector once when the component is mounted.

How can I accomplish this?

Current, unwanted behavior:

const Test = () => {
    const select = useSelector(state=> state); // updates every dispatch
    
    useEffect(()=> {
       console.log(select.value);
       }, []);
...
}

Wanted behavior, if react would let me...

const Test = () => {
    useEffect(()=> {
       const select = useSelector(state=> state); // only accessed once, doesn't update children on later dispatches
       console.log(select.value);
       }, []);
...
}
redux reactjs
2 Answers

You can use the equality check function of useSelector:

const select = useSelector(state => state, () => true);

By returning always true, you prevent updates to the data selected on mount in that component and thus the re-renders.

user_11410630

You could just grab the store and get the state using that. The store will not change, as long as you're not changing the store passed to the React Redux <Provider>.

const Test = () => {
  const store = useStore();
  console.log('Test rendered')

  useEffect(() => {
    const value = store.getState().value;
    console.log('useEffect value: ', value)
  }, [store]);

  // ...
};
user_9960810
Related