what is useRef for?

Question

I am new in React. I don't get "useRef" clearly. I found some code but I don't get it. colud you explain for me?

code.1

what is different between useRef(true) and useRef(false) ?
what is meaning of this two codes?
What is useRef doing in useEffect?

export default function useIsMountedRef() {
  const isMounted = useRef(true);

  useEffect(
    () => () => {
      isMounted.current = false;
    },
    []
  );

  return isMounted;
}

code.2

const mounted = useRef(false);
 useEffect(() => {
    if (!mounted.current) {
      mounted.current = true;
    }  else {
      // code
    }
  }, [dependency]);

or this one: [How to understand the useRef in react](https://stackoverflow.com/questions/68345103/how-to-understand-the-useref-in-react) — dippas, Jun 23 '22 at 01:03

score 1 · Accepted Answer · answered Jun 22 '22 at 23:24

1

The argument provided to useRef is the initial value that gets set for the ref.

const someRef = useRef(true);

will result in an object

{
  current: true
}

and

const someRef = useRef(false);

will result in an object

{
  current: false
}

For the useIsMountedRef function, it:

Initializes a ref with a value of true
The effect hook with an empty dependency array runs only once, after the component mounts. A function returned from an effect hook callback runs when the component unmounts. So this

  useEffect(
    () => doSomething,
    []
  );

means: "run doSomething when the component unmounts".

Here. doSomething is

() => {
  isMounted.current = false;
}

or: "Set the value in the isMounted ref to false when the component unmounts."

For the second code, an effect hook with a dependency array of [dependency] will mean that the callback runs both on mount, and right after a render whenever dependency changes. So

if (!mounted.current) {
  mounted.current = true;
}  else {
  // code
}

Whenever dependency changes or the component mounts:

If the ref isn't set to true, it'll be set to true
Otherwise, the other // code will run

Because it looks like no function was returned from that useEffect, unlike the other code, this code will not run something when the component unmounts - it'll only run when the component first mounts, and during a re-rendering that included a change to dependency.

Read the docs on useRef.

answered Jun 22 '22 at 23:24

CertainPerformance

356,069
52
309
320

The [beta docs](https://beta.reactjs.org/learn/referencing-values-with-refs) on `useRef` is also a good read – Nicholas Tower Jun 22 '22 at 23:26
@CertainPerformance thank you for you answer. But I am stll confused about useRef. For code#2, initial value was false. For if statement, you said that If the ref isn't set to true, it'll be set to true otherwise //code will run. In this case initila value was false so it should run if statement, right? what is true and false doing exactly?? – yoyoyoyo Jun 23 '22 at 00:50
@yoyoyoyo Yes, since it starts out false, that branch will be entered and it'll be set to `true` on mount. I don't know what you mean by `what is true and false doing`. They're boolean values, it depends on what references them elsewhere. – CertainPerformance Jun 23 '22 at 00:51
@CertainPerformance I have one more question. For this code is change password form, else if is sucess msg alert and else is error msg alert from api call. when first time form got error, error alert doesn't show up but next time I did it, msg alert is show up. do you know why? – yoyoyoyo Jun 23 '22 at 01:30
@CertainPerformance ` const mounted = useRef(false); useEffect(() => { if (!responseStatus.isSet) return; if (!mounted.current) { mounted.current = true; } else if (responseStatus.isSuccess) { enqueueSnackbar(responseStatus.message); } else { setError('afterSubmit', { ...responseStatus, message: responseStatus.message }); } }, [responseStatus]); ` – yoyoyoyo Jun 23 '22 at 01:30
@yoyoyoyo There's not enough context to say. That sounds like a completely separate question. – CertainPerformance Jun 23 '22 at 01:44

what is useRef for?

1 Answers1