iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A state rule belongs in a React project’s AI instruction file only if it changes the implementation an assistant produces for a concrete feature. “Keep state in the right place” is too vague to guide code; a useful rule gives the assistant a decision boundary it can apply.
Avery, author of the DEV Community article “Start Your React Rule File With State. Here Is How to Write That Section”, 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.” The six examples below are Avery’s project conventions, not requirements imposed by React.
What makes a state rule useful?
A usable instruction tells an assistant what choice to make, and under what conditions. It should steer code toward a project-specific implementation rather than restating a general aspiration.
For each proposed rule, ask: if the assistant saw this instruction, would it place state differently, avoid a duplicate value, or model an asynchronous result differently? If the answer is no, make the condition more concrete or leave the rule out.
#1 Best Overall
The examples here adapt Avery’s “State and Effects” section. Use them as a starting point, then replace their boundaries with the conventions your project actually wants.
Six state rules to adapt for a React project
1. Keep state local until independent features need it
Keep state within its feature or screen when only that part of the application needs it. Promote it to a shared owner only when at least two independent features need the same information over the long term. Two components inside one feature do not, by themselves, meet that threshold. Authentication state is not automatically global; make that decision based on actual consumers.
This “two independent features” threshold is Avery’s convention, not a React rule. React’s guidance on sharing state between components describes lifting shared state to a common owner. The right scope depends on which parts of your application need the value, not on a fixed React-wide threshold.
Free tools Windows power users keep installed
One-click scans. No signup required.
2. Keep one mutable owner for each piece of domain data
Do not maintain two independently editable copies of the same domain information. If a user edits a draft based on loaded data, keep the draft as the mutable value and treat the original as a comparison snapshot—not as another source that can also be changed. This gives updates one clear owner and avoids competing versions of the same information.
3. Derive values instead of storing duplicates
Do not store values that can be calculated from existing props or state. That includes dirty flags and comparison results: derive them from the current data when rendering. React’s state-structuring guidance warns that redundant state can get out of sync; fewer independently maintained values mean fewer mismatch paths.
4. Do not use an effect for synchronous derivation
When a value can be calculated synchronously from props or state, calculate it during render instead of storing it and synchronizing it with an effect. This rule is about synchronous derivation, not a ban on effects: effects still have uses when a component must synchronize with external systems.
5. Represent asynchronous outcomes explicitly in typed projects
When the project’s type system supports it, model loading, error, and success as explicit states rather than making null stand for several different conditions. A discriminated state shape can make the current outcome clear to both the implementation and its callers. This is a typed-project convention, not a universal React API requirement.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches6. Separate form presentation from state transformation when reuse calls for it
For forms where the project benefits from this boundary, keep the form component focused on presentation, supply its initial values from outside, and put state transformation in a hook. This can make form behavior easier to reuse and presentation easier to change. It is a project-level separation-of-concerns choice, not a React mandate.
How these conventions fit React’s documented rules
React’s official documentation, identified as React v19.3 when accessed, supports several foundations behind these examples: avoid redundant state, keep state values immutable, and structure shared state around the components that need it. It does not prescribe Avery’s exact feature-count threshold or require the form-and-hook boundary.
The React Rules of React state: “Props and state are immutable snapshots with respect to a single render. Never mutate them directly.” For object state, React’s object update guidance says to create a replacement object and pass it to the setter. Object spread copies only one level, so nested objects that need updating must also be copied rather than mutated.
React’s state guidance also covers lifting state to a common owner, resetting state with keys, reducers, and context. Those are available tools, not reasons to make every value global. Choose a shared owner where the consuming components actually need one; use context for deep sharing or a reducer to consolidate complex update logic when that suits the code. There is no universal complexity cutoff that dictates when a reducer or store is required.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Test whether the rules change generated code
A practical check is to compare outputs from the same feature prompt with and without the rules. Avery suggests using a recently generated component for this exercise. It is a project review technique, not a controlled study or evidence that rule files improve results in every case.
Best Value
- Choose a recent feature prompt and give it to your AI coding assistant without the six rules.
- Give the same prompt again with the rules included.
- Compare where state lives, whether derivable values are stored, whether two locations own the same information, and how loading and errors are represented.
- If the implementations are effectively unchanged, sharpen the rules’ decision conditions before adding more instructions.
The point is not to maximize the length of an instruction file. A short rule that reliably changes an implementation choice is more useful than a broad statement that sounds sensible but leaves the assistant to guess.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Example state section for an instruction file
You can adapt this compact version, changing the thresholds and boundaries to match your architecture:
- Keep state local to a feature or screen unless at least two independent features need it long term. Sharing between components in one feature alone does not justify a global store.
- Maintain one mutable owner for each piece of domain data; keep original values as comparison snapshots, not as a second mutable source.
- Do not store values derivable from props or state, including dirty flags and comparison results.
- Do not use an effect to synchronize values that can be derived synchronously during render.
- In typed code, represent loading, error, and success explicitly rather than assigning multiple meanings to
null. - For forms that benefit from the separation, keep the component presentational, pass initial values from outside, and put state transformations in a hook.
These rules should describe decisions your team wants an assistant to make. They are conventions to review against the application—not substitutes for understanding the feature’s actual data flow.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
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.
