What Is State?

Part of the Fundamentals section of Coddy's React journey — lesson 22 of 42.

Everything so far was frozen: data went in, a page came out, nothing ever changed. Real apps remember things that change: a like count, an open menu, the text in a search box. That memory is called state.

React gives components state through the useState hook:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

One line, three pieces:

count: the current value
setCount: the function that changes it
useState(0): the starting value

The golden rule: never assign to state directly. count = 5 changes a variable React isn't watching. setCount(5) changes the state and re-renders the component. That re-render is what updates the screen.

Try it yourself

This lesson doesn't include a code challenge.