STATE MANAGEMENT /// USESTATE HOOK /// RE-RENDERS /// IMMUTABILITY /// REACT MASTER CLASS /// STATE MANAGEMENT /// USESTATE HOOK /// RE-RENDERS /// IMMUTABILITY ///

React State

Give your components a memory. Master the useState hook, trigger re-renders, and build truly interactive UIs.

Component.jsx
1 / 10
12345
📦

Tutor:Normal variables don't work well for data that changes in React. If you update a let variable, the UI doesn't know it changed.


Skill Matrix

UNLOCK NODES BY LEARNING HOOKS.

Concept: The Hook

Hooks are special functions that let you "hook into" React features. useState is the hook that lets you add React state to function components.

System Check

Where must hooks like useState be called?

Community Holo-Net

Share your Hooks

ACTIVE

Built a complex state machine? Share your React components with the community.

Support Us

React State & Re-renders

Author

Pascual Vila

Frontend Instructor // Code Syllabus

Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" should change which image is displayed. Components need to "remember" things. In React, this kind of component-specific memory is called state.

Adding a state variable

To add a state variable, import useState from React at the top of the file:

import { useState } from 'react';
Then, declare a state variable inside your component. useState gives you two things: a state variable to retain the data between renders, and a state setter function to update the variable and trigger React to render the component again.

Anatomy of useState

The convention is to name this pair like const [something, setSomething]. You could name it whatever you like, but conventions make things understandable across projects.

State is isolated and private

State is local to a component instance on the screen. In other words, if you render the same component twice, each copy will have completely isolated state! Changing one of them will not affect the other.

View Full Deep Dive+

Unlike regular variables, state variables persist across renders. React remembers their values as long as the component exists in the DOM tree. Never mutate state variables directly. If you have an object or array in state, you must pass a completely new object or array to the setter function (using the spread operator ...) to ensure React detects the change and triggers a re-render.

State Glossary

State

A component's memory. Data that can change over time and affect what is rendered on the screen.

snippet.js

Hook

Special functions in React that let you 'hook into' React features like state and lifecycle. They always start with 'use'.

snippet.js

Re-render

The process where React calls your component function again to generate new UI based on updated state or props.

snippet.js

Setter Function

The second item returned by useState. It updates the state variable and tells React to re-render.

snippet.js

Initial State

The value passed into useState(value) when the component mounts for the first time.

snippet.js

Immutability

The principle that state should not be changed directly. Instead, a new copy must be created and passed to the setter.

snippet.js