React useEffect

How it works

An effect runs after a component commits and can synchronize an external system with current props or state. The dependency list describes reactive values the setup reads. React cleans up the earlier setup before running a changed one and when the component unmounts. This example synchronizes the browser document title with a local desk choice, then restores the previous title during cleanup. Filtering data or calculating totals would not require an effect.

Run the code

Use a separate empty lab folder with Node 22.12+ in the 22 series. Save the files below using their displayed paths; browsers may download only the basename, so create src, public or tests folders as listed. The pinned project uses React and React DOM 19.3.1 with Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints. React examples do not run in Bhylu’s current playground.

No Apache, MySQL or change to Bhylu’s server configuration is needed. These are local teaching projects, not a publishing package. Keep generated dependencies and lockfiles in your own lab. Review the project setup.

• package.json
• index.html
• src/main.jsx
• src/style.css
• vite.config.mjs

Example

import React, { StrictMode, useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

function App() {
  const [desk, setDesk] = useState('North');
  useEffect(() => {
    const previous = document.title;
    document.title = desk + ' · Lending desk';
    return () => {
      document.title = previous;
    };
  }, [desk]);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <button onClick={() => setDesk('East')}>Select East</button>
      <output>Desk: {desk}</output>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Expected result

The browser title follows the selected desk and the visible output shows East after the click.

desk belongs in the dependency list because the setup reads it. The cleanup closes over the previous title from that setup, so it can undo its own work. StrictMode repeats setup and cleanup in development to probe lifecycle safety. An empty dependency list would incorrectly leave the title at its first desk. Keep user-triggered submissions in handlers rather than title-like synchronization effects.