Recommended Free Tools
If a child component loses its input, resets unexpectedly, or appears to stop working whenever a parent updates, the usual cause is a component function declared inside another component. useState stores state for a component; it does not create component definitions. Move the child function to module scope, render it with JSX such as <Child />, and keep each piece of state in the component that owns it. React can then preserve the child’s state when the parent rerenders.
Why the nested component loses its state
React identifies state by a component’s position in the render tree and by the component type occupying that position. When the same component type remains in the same position, React can preserve its state. If a different component type replaces it, React removes the old subtree and creates a new one, so all state below that point starts over. This identity rule is explained in React’s Preserving and Resetting State guide.
As an Amazon Associate I earn from qualifying purchases.
A function declaration inside a parent component is recreated every time the parent renders. Even if the function has the same name and identical source text, the newly created function is a different JavaScript function object. React therefore treats the nested component as a new type. Updating unrelated parent state can consequently remount the child, clear an input, reset a counter, or rerun the child’s initialization.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsThat is why React’s documentation says not to nest component function definitions. Rendering a component inside another component is normal; defining the child function inside the parent is the problematic part.
#1 Best Overall
The pattern that causes the problem
This example declares Child inside Parent. Clicking the button updates the parent’s count, which rerenders Parent. A fresh Child function is produced during that render, so React replaces the previous child and its input state.
import { useState } from 'react';
export default function Parent() {
const [count, setCount] = useState(0);
function Child() {
const [text, setText] = useState('');
return (
<input
value={text}
onChange={event => setText(event.target.value)}
/>
);
}
return (
<>
<Child />
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
</>
);
}The issue is not that the child uses its own useState, nor that the parent also uses useState. Having independent state in parent and child is supported. The issue is the child’s changing function identity.
Repair it by defining the child at module scope
Place the child function outside the parent, normally in the same file or in its own module. The parent can still render it wherever it needs to. Because the function is created once at module load time, its component type remains stable across parent renders.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →import { useState } from 'react';
function Child() {
const [text, setText] = useState('');
return (
<input
value={text}
onChange={event => setText(event.target.value)}
placeholder="Type something"
/>
);
}
export default function Parent() {
const [count, setCount] = useState(0);
return (
<>
<Child />
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
</>
);
}Now a click still rerenders Parent, but Child is the same component type in the same tree position. Its local text state is preserved, so text remains in the input while the count changes.
If the child needs values from the parent, pass them as props. Props provide data and callbacks without recreating the component definition:
function Child({ label, onChange }) {
const [text, setText] = useState('');
function handleChange(event) {
const nextText = event.target.value;
setText(nextText);
onChange(nextText);
}
return (
<label>
{label}
<input value={text} onChange={handleChange} />
</label>
);
}
function Parent() {
const [count, setCount] = useState(0);
const [lastText, setLastText] = useState('');
return (
<>
<Child label="Name" onChange={setLastText} />
<p>Latest value: {lastText}</p>
<button onClick={() => setCount(count + 1)}>{count}</button>
</>
);
}Choose the component that should own the state
Keep state local when only one component needs it. In the repaired example, the input’s draft text belongs to Child, while the click count belongs to Parent. A parent rerender does not erase child state when the child type stays stable.
Move state to the nearest common parent when multiple components must read or change the same value. React’s guidance on this pattern appears in Sharing State Between Components. The parent becomes the single owner and passes the current value plus an event handler to each child.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →import { useState } from 'react';
function ChildInput({ value, onValueChange }) {
return (
<input
value={value}
onChange={event => onValueChange(event.target.value)}
/>
);
}
export default function Parent() {
const [text, setText] = useState('');
const [count, setCount] = useState(0);
return (
<>
<ChildInput value={text} onValueChange={setText} />
<p>Shared text: {text}</p>
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
</>
);
}This is called a controlled child: the parent supplies value, and the child reports edits through onValueChange. Do not keep a second, competing copy of the same value in the child unless you intentionally need a separate draft. Two owners can make the displayed value appear stuck or out of sync.
Render components with JSX, not by calling them as ordinary functions
Use <Child /> when you want React to render a component. Avoid Child() inside another component’s return statement or render logic. A direct call executes the function as part of the caller rather than creating a separate component boundary. Hooks inside that function then belong to the caller’s render, which violates the intended component and Hook structure.
// Correct: React renders Child as its own component.
return <Child />;
// Incorrect: this directly executes the function.
return Child();Component names should be capitalized, and a component that calls Hooks should be rendered by React. The same rule applies when the child is returned from a conditional branch, stored in a variable, or generated by a helper: keep the component definition stable and use JSX for the element.
Follow the Rules of Hooks
Call useState at the top level of the component that owns the state, or at the top level of a custom Hook. React relies on the order of Hook calls, so do not call it inside an if statement, loop, nested callback, event handler, or ordinary utility function. The official useState reference documents these constraints.
- Valid:
const [value, setValue] = useState('');directly inside a component. - Invalid: calling
useStateonly when a prop is true. - Invalid: calling a component function yourself and expecting its Hooks to form a new component instance.
- Valid: extracting repeated stateful logic into a custom Hook whose name starts with
use, then calling that Hook at the component’s top level.
The initial argument to useState is used only when that component instance is first created. Later renders ignore that argument and keep the current state. If a new initial value is not appearing, check whether you expected changing a prop or variable to reinitialize existing state. Update the state with its setter, or intentionally remount the component when a reset is actually required. React’s explanation of state as component memory is available in State: A Component’s Memory.
Best Value
Use a key only when a reset is intentional
A changing key tells React that the component at that position should be replaced. That resets the component and its entire descendant subtree. This is useful when switching between independent records, such as giving each document editor a fresh draft, but it is not a fix for an accidentally nested component.
function EditorScreen({ documentId, title }) {
return <Editor key={documentId} title={title} />;
}When documentId changes, Editor starts with its initial state for the new document. If the identifier should not clear the draft, leave the key stable and synchronize the necessary value explicitly through props or an effect designed for that purpose. Do not add a changing key merely to make a nested definition appear to work; it would force resets rather than preserve state.
Debug the failure systematically
- Find component declarations inside renders. Search the parent body for
function Child, arrow functions assigned to capitalized names, or component factories created during rendering. Move those definitions outside the parent. - Check the rendered syntax. Replace direct calls such as
Child()with JSX such as<Child />. Pass inputs as props and callbacks instead of invoking the child to obtain JSX. - Trace the state owner. Decide whether the value is private to the child or shared. Keep private state in the child; lift shared state to the closest common parent and pass a value and setter callback.
- Inspect keys. Look for a key that changes on every render, uses a transient value, or is attached to the wrong element. A key change deliberately remounts the subtree.
- Verify Hook placement. Ensure every
useStatecall is unconditional and at the top level of a component or custom Hook. - Separate initialization from updates. Remember that changing the expression passed as the initial state does not update an existing instance. Use the setter for normal changes.
- Reduce to a small reproduction. Temporarily leave one input, one parent button, and the two state variables. If the input survives the parent update after moving the child to module scope, add other props and branches back one at a time.
Common symptoms and their precise fixes
The input clears whenever another button is clicked
The button likely updates parent state while the input component is nested in the parent. Move the input component outside the parent. Keep the input’s draft state local unless the parent must read it continuously.
Free tools Windows power users keep installed
One-click scans. No signup required.
A prop change does not replace the child’s initial value
That is normal for useState: the initializer runs only on mount. Either make the child controlled by passing value and an update callback, or define an explicit synchronization behavior for the particular prop. Do not expect a new initializer expression to reset an existing instance.
Two panels unexpectedly share or lose state
Check whether they are the same component type in the same position, whether their keys are stable and distinct, and whether the state should instead live in their parent. React preserves state by position; changing the type or key resets it.
The error mentions Hooks or Hook order
Look for a Hook inside a condition, loop, nested function, or direct component-function call. Restore a top-level call in the component React renders, then pass the resulting state through props where needed.
Quick Recap
What to remember
useStatesupplies memory to a component; it does not manufacture a component.- Nested component definitions acquire a new function identity whenever the parent renders and can reset descendant state.
- Define child components at module scope and render them with JSX.
- Keep independent state with its owner; lift shared state to the nearest common parent.
- Use a changing key only when replacing the subtree and resetting its state is the desired behavior.
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.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
