Bug: Identical component in ternary does not rerender with initial state values set via props

This issue has been created since 2022-09-05.

React version: 18.0.0

Steps To Reproduce

  1. Take any component that makes use of useState with an initial value set via props, i.e. useState(props.myInitialValue)
  2. render two of these components via a ternary in a parent component, with differing prop values
  3. Toggling the ternary value to toggle which instance of the component should be shown
  4. No matter how many times you toggle which component is shown, the values of the first rendered component are used

Link to code example: https://codesandbox.io/s/hardcore-thunder-mennyr?file=/src/App.tsx

The current behavior

No matter which component is shown (how many times the toggle button is clicked), the originally rendered props of the component are shown.

The expected behavior

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.

princefishthrower wrote this answer on 2022-09-05

Update: adding a key prop to each of the components in the ternary statement resolves this issue. However, if this is the case (and perhaps not directly a 'bug') then I believe a warning should be added to the linter similar to the key warning for items rendered in a list.

rickhanlonii wrote this answer on 2022-09-06

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

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-09-27
Star Count 195296
Watcher Count 6655
Fork Count 40431
Issue Count 1113

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
RoomsListTileComponent 0 2021-09-23 2022-07-12
Strange bug in `get_events`; returning events related to other symbols 0 2021-02-19 2022-09-21
Cannot import robin_stocks 11 2021-02-21 2022-07-31
Refresh Token Endpoint 1 2021-02-16 2022-08-07
Schema validation incorrectly fails for modifiers when using $currentDate 2 2021-01-20 2022-09-01
Cannot access offset of type string on string 1 2022-03-28 2022-09-01
Add type annotations for the python library to allow static anlyzing 0 2021-07-13 2022-09-11
Twitter 'Install App' 'bookmarks' website root not url 3 2022-02-17 2022-07-13
RPeaks are calculated twice in ecg_process 5 2022-01-10 2022-09-14
`FeedIdOrName` uses feed with unknown value `feeds-builtin` 2 2022-07-12 2022-09-15
[GSD-2021-1002845] GSD Request 1 2021-12-30 2022-08-30
Wrong attribute on PIL Images AttributeError: shape 2 2021-10-05 2022-08-05
add support for query parameters serializer schema 1 2020-12-30 2022-08-20
Extended README 0 2020-11-16 2022-01-23
is rss still working on google news? 0 2022-01-06 2022-09-02
Log response as HAR to file 1 2021-01-25 2022-02-03
DotLiquid - Array filters should support 'where' filter clause 1 2019-08-20 2022-09-04
ssh on device or server without password 2 2022-05-16 2022-09-08
vpnclound listen two internet interfaces 0 2021-04-29 2022-07-24
Unicode support 2 2021-05-03 2021-10-11
[DowngradePhp56] Add DowngradeArrayFilterUseConstantRector 0 2021-12-25 2022-09-10
[Feature request]: 界面底部显示 2 2022-08-09 2022-09-09
[MU4 Issue] Default paper color, grey, does not tally with "Preferences" display 1 2022-03-31 2022-04-01
Interactive Visualizer with Buttons or in App 2 2022-05-17 2022-09-04
[BUG]: Do not require a display when invoking --help 1 2022-02-08 2022-09-03
Support for more slave select (i.e. chip select/CS) channels on SPI 1 2020-03-11 2022-09-02
附件版本(cfs.files.filerecord)列表页数据Excel导出报错 0 2021-11-05 2021-11-24
action visible 的参数不统一 0 2021-11-02 2022-07-27
Add support for style in @svelte-parts/icons 1 2021-09-13 2022-07-29
[Icon Request] Support for .excalidraw 4 2021-11-19 2022-09-27
Responses other than 200 and 400 0 2021-02-09 2022-09-26
Documentation should specify cores and vCPUs for the offerings 3 2022-08-03 2022-08-15
Support CREATE SCHEMA in Pravega connector 0 2021-08-11 2022-02-22
Wrong base model in surface defect detection example with the federated learning job 2 2021-06-30 2021-11-05
Edge AI Benchmark: Consolidate/Prioritize metrics 1 2021-07-07 2022-08-05
when I use 'get-command', the path of the command display incompletely when the path are long. 2 2021-11-10 2022-09-24
SIGABRT in vim9script list-unpack 4 2022-03-18 2022-09-23
ListView GroupStyle.HeaderTemplate not rendering on Wasm 1 2022-04-23 2022-08-24
Why does vkCmdCopyBufferToImage for the stencil aspect require bufferOffset to be a multiple of 4? 3 2021-12-02 2022-08-30
Problem using SVMAllocator with multiple Context 1 2021-08-26 2022-09-02
IPv4-mapped address 5 2021-09-18 2022-01-16
question: packages must be 'main'? 1 2022-02-25 2022-09-13
What's prg? 1 2021-03-14 2022-01-16
How to decode generic without "sniffing" the body? 4 2021-04-21 2022-09-25
HTTP status 599, no error message and "authentication" : true error 3 2012-02-28 2022-07-21
add new Font Family in admin panel wysiwyg editor 1 2021-12-20 2022-08-29
Xlua预编译成通用字节码大小端问题及稳定性 0 2021-02-03 2022-09-17
How to create a SAML-enabled service principal that's linked to the application registration 27 2019-11-06 2022-09-25
Wrong defaults for CrossProject builds in EclipseKeys.eclipseOutput 2 2017-02-13 2022-09-16
Enable new console override behavior for React Native 1 2021-09-14 2022-08-30