React: useState or useRef?

Question

I am reading about React useState() and useRef() at "Hooks FAQ" and I got confused about some of the use cases that seem to have a solution with useRef and useState at the same time, and I'm not sure which way it the right way.

From the "Hooks FAQ" about useRef():

"The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class."

With useRef():

function Timer() {   const intervalRef = useRef();    useEffect(() => {     const id = setInterval(() => {       // ...     });     intervalRef.current = id;     return () => {       clearInterval(intervalRef.current);     };   });    // ... } 

With useState():

function Timer() {   const [intervalId, setIntervalId] = useState(null);    useEffect(() => {     const id = setInterval(() => {       // ...     });     setIntervalId(id);     return () => {       clearInterval(intervalId);     };   });    // ... } 

Both examples will have the same result, but which one it better - and why?

Answer 1

The main difference between both is :

useState causes re-render, useRef does not.

The common between them is, both useState and useRef can remember their data after re-renders. So if your variable is something that decides a view layer render, go with useState. Else use useRef

I would suggest reading this article.