State: what the screen remembers

State and props

Props come from the parent and are read-only. State belongs to the component itself and changes over time, usually because the user did something. When state changes, React calls the component again (a re-render) and updates the screen to match.

useState

useState is a hook (a special React function whose name starts with use) that gives a component one piece of state. It returns the current value and a setter. Calling the setter with a new value tells React to re-render.

const [query, setQuery] = useState('');        // starts empty
setQuery('physics');                            // re-render with the new value

const [notes, setNotes] = useState([]);
setNotes([newNote, ...notes]);                  // a NEW array: React sees the change

Lifting state up

SearchBar needs the search text to show it in the input. NoteList needs the same text to know which notes to show. If each kept its own copy, they would disagree. The fix is lifting state up: move the state to the nearest common parent (NotesPage) and pass it down as props, together with a function to change it.

function NotesPage({ initialNotes }) {
  const [notes, dispatch] = useReducer(notesReducer, initialNotes);
  const [query, setQuery] = useState('');

  // derived: computed on every render, never stored in its own state
  const visible = sortForDisplay(filterNotes(notes, query));

  return (
    <main>
      <SearchBar value={query} onChange={setQuery} />
      <NoteList
        notes={visible}
        onDelete={(id) => dispatch({ type: 'deleted', id })}
        onTogglePin={(id) => dispatch({ type: 'pinToggled', id })}
      />
    </main>
  );
}

Derived values: compute them, do not store them

A derived value is anything you can work out from state you already have. The visible list is notes filtered by query, so compute it during render. Do not add a third piece of state called filteredNotes: you would have to remember to update it every time notes or query change, and one day you will forget.

useReducer for the notes list

The notes list changes in many ways: add, edit, delete, pin. useReducer puts all those changes in one pure function called a reducer. It takes the current state and an action (an object such as { type: 'deleted', id: 4 }) and returns the next state. Components call dispatch(action) instead of setting state directly. Because the reducer is a plain function, you can test it without React.

function notesReducer(notes, action) {
  switch (action.type) {
    case 'deleted':
      return notes.filter((n) => n.id !== action.id);
    case 'pinToggled':
      return notes.map((n) => (n.id === action.id ? { ...n, pinned: !n.pinned } : n));
    // 'added' and 'updated' come in the task
    default:
      throw new Error('Unknown action: ' + action.type);
  }
}

UI state and server state

UI state lives only in the browser: the search text, whether a dialog is open, a half-typed form. Server state is data the server owns, like the notes in the database. The browser only holds a copy, which can go out of date when you edit a note on another device. In the next module you will load notes with fetch and keep that copy fresh with a library called TanStack Query. For now, the reducer holds the notes so we can build the screens.