How to access React Redux value only once?

Question

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);
       }, []);
...
}

Answer 1

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]);

  // ...
};