A state rule belongs in a React project’s AI instructions when it changes the code an assistant produces for a concrete feature. Avery, author of a DEV Community article on the subject, puts the test this way: “A rule belongs in the file if a session that reads it produces different code than a session that does not.” Use the state section to set project-specific decision boundaries—not to repeat general advice such as “keep state in the right place.”
Start with a rule that changes implementation choices
“Keep state in the right place” sounds sensible but does not tell an assistant what to do. A useful instruction gives it a decision it can apply while building a feature: which component or feature owns a value, when values should be derived rather than stored, and how asynchronous states should be represented.
As an Amazon Associate I earn from qualifying purchases.
Avery’s six examples below are project conventions, not requirements imposed by React. React’s documentation supports several underlying practices, including avoiding redundant state and treating state as immutable, but it does not mandate Avery’s exact thresholds or component boundaries.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Six state rules to consider for a React project
1. Keep state local until independent features need it
Avery’s convention is to keep state within a feature or screen unless at least two independent features need it over the long term. Two components in the same feature do not, by themselves, meet that threshold; they may simply need a shared owner within that feature. Authentication state is not automatically global under this convention either: decide based on which independent features need it and for how long.
#1 Best Overall
This is a project decision boundary, not a React rule. React’s state-management guidance describes lifting state to a common owner when components need to coordinate. For values needed farther down a tree, context is another option; it is not a reason to make every value global.
2. Keep one mutable owner for the same domain data
Do not maintain multiple mutable copies of the same information as competing sources of truth. If a feature needs the original value for comparison, treat it as a comparison snapshot rather than a second current value that can drift out of sync.
This convention aligns with React’s guidance to avoid redundant state. When the same fact is stored in multiple places, updates can leave the copies inconsistent.
3. Derive values instead of storing them
Do not store values that can be calculated from existing props or state, including dirty flags and comparison results. Calculate them during render so they cannot fall out of sync with their inputs.
For example, compute whether a form differs from its initial values from the current and initial values rather than updating a separate isDirty state variable. React’s guidance on structuring state explains why redundant state creates opportunities for mismatches.
4. Do not use an effect for synchronous derivation
If a value can be calculated synchronously from props or state, calculate it during render instead of copying it into state and synchronizing it with an effect. This rule is about derivation, not a ban on effects: effects remain appropriate for synchronizing with external systems and other work that belongs outside rendering.
5. Represent asynchronous outcomes explicitly when types allow
In a typed project, model loading, error, and success as explicit states when the application’s types support that representation. Avoid making null stand for several unrelated conditions, such as “not loaded yet,” “request failed,” or “there is no result.”
This is a project convention for making states and their handling clear; it is not a requirement of React’s API.
Best Value
6. Separate form presentation from state transformation when it helps reuse
Avery’s convention keeps the form component focused on presentation, supplies initial values from outside, and puts state transformation in a hook. This can make the boundary easier to reuse and test in a project that benefits from that separation. It is a design choice, not a React-prescribed form architecture.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Update object state without mutating it
React’s documentation says: “Props and state are immutable snapshots with respect to a single render. Never mutate them directly.” When updating an object in state, create a replacement object and pass it to the setter rather than changing the existing object in place. React’s object-state guidance also emphasizes that object spread makes a shallow copy: nested objects still need to be copied along the path being updated.
This is official React guidance, unlike the project-specific thresholds and form boundary above. The current React documentation identifies itself as React v19.3.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Check whether the rules change generated code
Use Avery’s proposed exercise as a practical check, not as a controlled study: take a recently generated component and give the same feature prompt to an AI coding assistant twice, once with the six rules and once without them. Compare the implementation choices that the rules are meant to affect:
- Where the state lives and whether the features using it are independent.
- Whether values derivable from props or state are stored separately.
- Whether two locations own mutable copies of the same information.
- How loading, error, and success are represented.
If the outputs are effectively unchanged, sharpen the project’s decision conditions before adding more rules. Avery describes the sample section as around two hundred words; that is a description of the example, not evidence that a particular length or rule file improves results. The cited article and React documentation do not establish a named study or statistic measuring the effectiveness of these instructions.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
