DEV Community

Cover image for useState vs useRef - When to use state and when to use ref
Francisco Moretti
Francisco Moretti

Posted on • Originally published at franciscomoretti.com

useState vs useRef - When to use state and when to use ref

What is useState?

useState is a React hook used for managing state in functional components. It allows you to add state to your components, making them dynamic and interactive.

Key Features of useState

  • State Management: useState helps manage state within a component.
  • Re-renders on Change: The component re-renders when the state changes.
  • Batched Updates: React batches multiple state updates for performance.

Example using useState

Here’s a simple counter that increments when a button is clicked.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;
Enter fullscreen mode Exit fullscreen mode

In this example, useState initializes the count at 0 and updates it each time the button is clicked, causing the component to re-render.

What is useRef?

useRef is another React hook, primarily used for accessing and manipulating DOM elements directly. It persists values between renders without causing re-renders.

Key Features of useRef

  • DOM Reference: Provides a way to reference and interact with DOM elements.
  • No Re-renders on Change: Changing the ref value does not trigger a re-render.
  • Persistent Values: Keeps the same object reference between renders.

Example using useRef

Here’s an example where clicking a button focuses an input field.

import React, { useRef } from 'react';

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

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default FocusInput;
Enter fullscreen mode Exit fullscreen mode

In this example, useRef creates a reference to the input element, allowing direct DOM manipulation to focus the input field when the button is clicked.

useState vs useRef: A Comparison 🔍

Let's compare useState and useRef based on several aspects.

Aspect useState useRef
Purpose State management DOM reference
Return value Returns [value, setValue] { current: initialValue }
Initial value Required Optional
Re-render on change Yes No
Mutablility Mutable Immutable
Update trigger Function call Direct mutation of current
Usage in rendering Yes No
Async updates Batched Immediate
Hook type State hook Ref hook
Common use case Managing component state Accessing/manipulating DOM elements

When to Use useState

  • Managing dynamic values that impact the UI.
  • Triggering re-renders to reflect state changes.

When to Use useRef

  • Accessing or modifying DOM elements directly.
  • Storing mutable values that persist across renders without causing re-renders.

Conclusion

Understanding the differences between useState and useRef is crucial for effective state management and DOM manipulation in React. Use useState when you need stateful logic that affects rendering. Use useRef for accessing DOM elements and persisting values without causing re-renders.

Top comments (0)