DEV Community

Cover image for React controlled and uncontrolled hooks
Manish Baral
Manish Baral

Posted on

1

React controlled and uncontrolled hooks

In React, controlled and uncontrolled components are patterns used to manage form inputs. React Hooks introduced the concepts of controlled and uncontrolled hooks to manage state within functional components. Here’s an overview:

Controlled Hooks:

useState Hook: With controlled hooks, state is managed directly by React. The useState hook allows you to declare state variables and update them using setter functions provided by React. When a component's state changes, React re-renders the component with the updated state.

import React, { useState } from 'react';

function ControlledComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

In this example, the input field’s value is controlled by the value state variable, and updates are handled by the setValue function.

Uncontrolled Hooks:

useRef Hook: Uncontrolled hooks allow you to manage state directly within the DOM rather than through React’s state management system. The useRef hook creates a mutable ref object whose current property can hold a value that persists across renders without causing a re-render.

import React, { useRef } from 'react';

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

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Log Value</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

In this example, the input field’s value is managed directly by the DOM via the inputRef.current.value, and updates are accessed without involving React's state management system.

Choosing Between Controlled and Uncontrolled Hooks:

  • Controlled Hooks: Use controlled hooks when you need React to manage and synchronize the state of form inputs across your application. Controlled components provide a single source of truth for form data, making it easier to track and manage changes.
  • Uncontrolled Hooks: Use uncontrolled hooks when you need direct access to DOM elements or when dealing with large forms where controlled components might lead to performance issues. Uncontrolled components can be faster because they don’t trigger re-renders for every state change. However, they may be harder to track and manage, especially in complex applications.

Both controlled and uncontrolled hooks have their use cases, and the choice depends on your specific requirements and preferences.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (1)

Collapse
 
uchenna_nsoha_e7a97acd3dd profile image
Uchenna Nsoha

Very Interesting presentation. I wish I understood React hooks very well, my programming would become professional.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay