React version: 18.0.0
Link to code example: https://codesandbox.io/s/hardcore-thunder-mennyr?file=/src/App.tsx
No matter which component is shown (how many times the toggle button is clicked), the originally rendered props of the component are shown.
In my provided example, I expect
true and "World" to be shown on the screen after toggling which component to render.
My guess is that React is somehow caching or 'seeing' the same component, despite the change in the prop values to said component. I also understand ternaries to render components are a topic of debate, but nevertheless, it is still valid JSX and I expect the expected behavior as described to occur.
This is expected, albeit sometimes surprising, behavior because it's the component's position in the tree, not the JSX markup, that matters to React. Using a key is the right way to tell react that the component is different, even though it's in the same position. I'm not sure how a lint rule would work here since it would warn in valid use cases.
Check out the new docs for a better explanation: https://beta.reactjs.org/learn/preserving-and-resetting-state#same-component-at-the-same-position-preserves-state
|Issue Title||Created Date||Updated Date|