[Feature Request]: useStateRef

[behnammodi]

I start with an example:

const [count, setCount] = useState();

useEffect(() => {
 const handleVisibiltuy = () => {
 console.log(count);
 };

 document.addEventListener('visibilitychange', handleVisibiltuy);

 return () => document.removeEventListener('visibilitychange', handleVisibiltuy);
}, [count]);

Imagine we have the above code, what is a problem? problem is React runs useEffect inside function every time count changes, but might we don't need to know updated count's value until visibilitychange event happens.

we can have a new hook like this:

function useStateRef<T>(initialValue: T): [T, (nextState: T) => void, () => T] {
 const [state, setState] = useState(initialValue);
 const stateRef = useRef(state);
 stateRef.current = state;
 const getState = useCallback(() => stateRef.current, []);
 return [state, setState, getState];
}

and we can change exmaple code to this:

const [count, setCount, getCount] = useStateRef();

useEffect(() => {
 const handleVisibiltuy = () => {
 console.log(getCount());
 };

 document.addEventListener('visibilitychange', handleVisibiltuy);

 return () => document.removeEventListener('visibilitychange', handleVisibiltuy);
}, []);

So, we could remove count from useEffect dependence and useEffect inside function just run once

Also, this hook is very useful for useCallback, please see this exmaple:

const [count, setCount] = useState();

const handleClick = useCallback(() => {
 console.log(count);
}, [count]);

we can change to

const [count, setCount, getCount] = useStateRef();

const handleClick = useCallback(() => {
 console.log(getCount());
}, []);

useStateRef is just a name and we can have a better name for that

[gaearon]

Hi, thanks for your suggestion. RFCs should be submitted as pull requests, not issues. I will close this issue but feel free to resubmit in the PR format.

[behnammodi]

@gaearon Thanks, I opened a new one react/react#22169

[gaearon]

Sorry that’s not what I was suggesting. This is the correct repository for RFCs (not the React one!) but the RFCs need to be opened as pull requests (not issues). Please read the README which explains the process.

[gaearon]

https://github.com/reactjs/rfcs#what-the-process-is

[behnammodi]

Sorry that’s not what I was suggesting. This is the correct repository for RFCs (not the React one!) but the RFCs need to be opened as pull requests (not issues). Please read the README which explains the process.

Thanks, I did it #201