State Management

This document covers state management in React function components, including the useState hook, syntax, and practical examples for managing and updating dynamic data in the UI.

State Management in React Function Components

State management allows React components to handle data that changes over time. The state of a component determines its behavior and how it renders at any given moment.

What is State

State refers to the condition or data of a component at a specific time. It holds information that influences the component’s behavior and rendering.

Important

Before hooks, only class components could manage state. With hooks, function components can now manage local state as well.

The useState Hook

The useState hook enables function components to manage their own state. It returns an array with two elements: the current state value and a function to update that value.

Syntax

1const [stateName, setStateName] = useState(initialValue)

• stateName: The current state value.
• setStateName: Function to update the state.
• initialValue: The initial value for the state variable.

This syntax uses array destructuring to assign the state value and updater function to variables.

Example: Updating State with useState

Below is an example of a component that updates a name value when a button is clicked.

 1import React, { useState } from 'react'
 2
 3function StateManagement() {
 4  const [name, setName] = useState('John')
 5  const [buttonClicked, setButtonClicked] = useState(false)
 6
 7  function updateName() {
 8    setName('John Doe')
 9    setButtonClicked(true)
10  }
11
12  return (
13    <>
14      <h1>State Management using useState</h1>
15      <p>The name is {name}.</p>
16      <button onClick={updateName} disabled={buttonClicked}>
17        Update Name
18      </button>
19    </>
20  )
21}

• Before clicking the button, the UI displays “The name is John.”
• After clicking, it updates to “The name is John Doe.” The button then becomes disabled.

Example: Toggling Visibility

This example demonstrates toggling a message’s visibility using state.

 1import React, { useState } from 'react'
 2
 3function ToggleMessage() {
 4  const [isVisible, setIsVisible] = useState(true)
 5
 6  function toggleVisibility() {
 7    setIsVisible(prev => !prev)
 8  }
 9
10  return (
11    <div>
12      <h2>Toggle Message</h2>
13      <button onClick={toggleVisibility}>
14        {isVisible ? 'Hide message' : 'Show message'}
15      </button>
16      {isVisible && <p>This is a hidden message.</p>}
17    </div>
18  )
19}

• The button toggles the visibility of the message.
• The button text and message update based on the state.

Conclusion

State management in React function components enables dynamic and interactive UIs. The useState hook provides a simple way to manage and update state, making components more flexible and responsive to user actions.

FAQ