presets.dev: Instructions file for GitHub Copilot

React Copilot Instructions: Components, State and Effects

Path-specific Copilot instructions for React. They apply through applyTo and leave .github/copilot-instructions.md in place.

Updated for React 19.3.1, Nov 2026

Do not upgrade dependencies or the framework version unless the task asks.

Project shape

Build the tree from function components. One component owns one job. Put shared UI in the folder the project already uses. Colocate a component's test next to it when that is the local pattern.

Props are the input. State is what this component owns. Derived values are computed while rendering. A parent owns state that two children must share.

State and rendering

Set state in response to an event or a completed request. Compute fullName from first and last during render. An effect that copies props into state goes stale and renders twice.

Use a functional update when the next state depends on the previous one. Include every reactive value a hook callback reads, or restructure so the callback does not close over a changing value.

Lists need a stable id as key. Index keys break when the list is reordered, filtered, or inserted into.

Effects

Effects synchronize with an external system: a subscription, a timer, a widget outside React. Return a cleanup that cancels the subscription or the timer. Do not fetch in an effect when the framework already loads data in a server component or a router loader. If the project does fetch in effects, abort on cleanup and ignore a response that arrives after unmount.

Strict Mode runs setup and cleanup an extra time in development. A cleanup that is missing will show up there. Do not "fix" that by disabling Strict Mode.

React 19 patterns

Actions can submit a form and expose pending state. Keep the action's input validated at the boundary that talks to the server. A client action is not authorization.

Use a View Transition only when the project is on 19.3 or newer and the screen is a browser. Wrap the update that should animate. Provide a reduced-motion path. Fragment refs and browser() are the same kind of gate: check the version, and do not import them into a Native tree.