It's described in more detail here: https://react.dev/learn/preserving-and-resetting-state
I agree it's not immediately obvious. The canonical solution for your case is to extract components like
SignupForm, for example.
It might be a good idea to mention it in "conditional rendering" but I'm worried it's a bit much at that stage.
@gaearon thanks for the thoughtful reply!
This section definitely covers these issues: https://react.dev/learn/preserving-and-resetting-state#resetting-state-at-the-same-position
The only thing that doesn't seem clear to me is what is considered the identity of a native element. "when you render a different component in the same position, it resets the state of its entire subtree"
Intuitively you'd think that different
button element would be considered different for the purposes of rendering. If it's literally just the element that's taken into consideration, then maybe the page could mention that and when that might be surprising (maybe using
button buttons as an example).
Hope this input is helpful!
@gaearon also, this was the use case:
There's obviously lots of ways I could have modelled this that wouldn't have stumbled into this issue. I could have just hidden the password field instead of not rendering it, and used a
value on the submit button to help the server distinguish the type of login.
To be honest I'm still not clear on how React models the "tree" to decide if a element is in the same place as a previous element. Looking at my implementation I still don't see why the presence of the
password input field affects the identity / position in the tree of the two buttons.
Related Issues (20)
- RSC: How to realize shared code with client-specific execution results
- [DevTools Bug]: 'Unable to find React on the page' in incognito on Firefox HOT 1
- eslint react-hooks/rulesOfHooks: add rule to check for non-function return from useEffect HOT 2
- [DevTools Bug] Cannot add child "1161" to parent "942" because parent node was not found in the Store. HOT 5
- When a state is update the whole component is getting Re-rendered instead it should Re-render only those element where the updated state is used HOT 1
- Bug: `useEffect()` is called with incorrect context in strict mode HOT 1
- Bug: Unexpected Suspense SSR Component Behavior with useSyncExternalStore in React 18.3.0-next: Rerender and Fallback State Issues
- Bug: State inside custom hook is always undefined, but is present/defined outside.
- High Security Vulnerability found in the dependency Minimist HOT 2
- hahaha react HOT 1
- Bug: HOT 3
- TypeError: Cannot read properties of undefined (reading '_internalRoot') HOT 1
- [DevTools Bug]: copy operations don't work in Chrome HOT 4
- Suggestion: [eslint-plugin-react-hooks] - should not warn/error when RefObject/MutableRefObject passed from outside hook
- Is there any roadmap to enable the detection of iframes in React devtools? HOT 4
- Update react devtools readme - The React Tab Doesn't Show Up - CSP HOT 2
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.