RFC: useStateRef

[behnammodi]

Unfortunately, I couldn't find the best place to ask about that:

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

[anshul2807]

Is this still an issue?

[behnammodi]

Is this still an issue?

are you joking?

[anshul2807]

Is this still an issue?

are you joking?

I'm Not.

[behnammodi]

Is this still an issue?

are you joking?

I'm Not.

Yes this is an issue

[anshul2807]

Is this still an issue?

are you joking?

I'm Not.

Yes this is an issue

All right..
Can I work on this issue.. If you don't mine.

[behnammodi]

I'm not React Core Team member, you should ask from them

[anshul2807]

I'm not React Core Team member, you should ask from them

Alright.

[bvaughn]

There's a separate area for RFCs:
https://github.com/reactjs/rfcs#react-rfcs

Seems like this issue should be opened there?

[anshul2807]

There's a separate area for RFCs:
https://github.com/reactjs/rfcs#react-rfcs

Seems like this issue should be opened there?

But we also need to PR for this repo also...

[behnammodi]

There's a separate area for RFCs:
https://github.com/reactjs/rfcs#react-rfcs

Seems like this issue should be opened there?

Thanks, @bvaughn, I couldn't find it, but anyway I will open this issue on there

[bvaughn]

Thanks! I'll close this issue then.