bhylu.com

Advertisements

React useContext

Use context for values many descendants need, while keeping update ownership explicit.

How it works

Context supplies a value from a provider to consumers below it. It reduces repetitive prop forwarding, but it is not a database or a universal state store. Here the current desk is useful in a deeply nested notice. App still owns the value and the switch action. A context default is a fallback when no provider exists, not a value that automatically changes with another component’s state.

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.

Example

src/main.jsx

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

const DeskContext = createContext('Unassigned');
function CollectionNotice() {
  const desk = useContext(DeskContext);
  return <output>Current desk: {desk}</output>;
}
function App() {
  const [desk, setDesk] = useState('North');
  return (
    <DeskContext.Provider value={desk}>
      <main>
        <h1>Neighbourhood lending desk</h1>
        <button onClick={() => setDesk('East')}>Use East desk</button>
        <section>
          <h2>Collection notice</h2>
          <CollectionNotice />
        </section>
      </main>
    </DeskContext.Provider>
  );
}

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

Expected result

The nested notice changes from North to East when the owner updates the provider value.

The consumer subscribes to the nearest matching provider. Separate contexts can keep unrelated updates apart; a single giant object can make many consumers update together. Passing a callback through context is possible, but document who may call it and what it changes. Ordinary props remain the clearest choice for short, explicit paths.

For API contracts and version differences, use React’s official documentation.

Advertisements