useRef vs useState in React

When it comes to React, there are two ways that you can manage state in your applications: with the useState hook, or with the useRef hook. Both have their own advantages and disadvantages, and knowing when to use each one is important for writing well-organized and maintainable React code.

The useState hook is a function that takes a single argument, which is the initial state. It returns a pair of values: the current state, and a function that updates the state. The function that updates the state takes a new value, and returns the updated state.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

The useRef hook is a function that takes a single argument, which is the initial value. It returns a mutable object with a .current property. The .current property is initialized to the initial value, and can be updated with the .current.set() method.

import React, { useRef } from 'react';

function App() {
  const countRef = useRef(0);

  return (
    <div>
      <p>{countRef.current}</p>
      <button onClick={() => countRef.current.set(countRef.current + 1)}>
        Increment
      </button>
    </div>
  );
}

There are a few key differences between the useState and useRef hooks that are important to understand.

The first difference is that the useState hook always returns the current state, even if it hasn't changed. This is because the setState function creates a new state object, and React uses reference equality to determine if the component should re-render.

On the other hand, the useRef hook only updates the .current property of the mutable object that it returns. This means that if the .current property hasn't changed, React won't re-render the component.

The second difference is that the useState hook is a function, while the useRef hook is an object. This means that you can't pass arguments to the useState function to update the state. Instead, you must call the function that is returned by useState.

The third difference is that the useState hook is designed to be used with functional components, while the useRef hook can be used with either functional or class-based components.

The fourth difference is that the useState hook is initialized when the component is rendered, while the useRef hook is initialized when the component is created. This means that if you need to access the state outside of the render function, you need to use the useRef hook.

So, which one should you use? It depends on your needs. If you need to access the state outside of the render function, or you're using a class-based component, use the useRef hook. Otherwise, use the useState hook.