About React useRef Hook

In React, the useRef hook is used to create a reference to a DOM element or a value that persists between renders. The useRef hook is similar to the useState hook, but it doesn’t trigger a re-render when the value is updated. Instead, it provides a way to access and modify a value outside of the component’s render cycle.

The useRef hook takes an initial value as its argument and returns a mutable object with a current property. The current property contains the current value of the reference and can be updated using the .current property.

Here’s an example of how to use useRef to create a reference to a DOM element:

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    console.log(inputRef.current.value);
    inputRef.current.value = '';
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, the useRef hook is used to create a reference to the input element, and the handleSubmit function logs the input value and clears the input field.

Common mistakes when using useRef include treating it like a state variable and trying to trigger a re-render when the value changes. The useRef hook should only be used to create a reference or a mutable value that persists between renders, and should not be used to trigger a re-render.

Another trick when using useRef is to create a reference to a previous value, which can be useful for tracking state changes. Here’s an example:

function Counter() {
  const [count, setCount] = useState(0);
  const previousCountRef = useRef();

  useEffect(() => {
    previousCountRef.current = count;
  }, [count]);

  const previousCount = previousCountRef.current;

  return (
    <div>
      <p>Current Count: {count}</p>
      {previousCount && <p>Previous Count: {previousCount}</p>}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, the useRef hook is used to create a reference to the previous value of the count state variable. The useEffect hook updates the previousCountRef.current value whenever the count state variable changes, and the previousCount variable is used to display the previous count value.

Overall, the useRef hook is a powerful tool for creating references and tracking state changes in React. With careful use and attention to detail, you can use it to create dynamic and responsive user interfaces with ease.