Bug: Hydration not update the attributes of dom?

This issue has been created since 2022-11-21.

React version: 18.3.0

Steps To Reproduce

See LiveDemo

Link to code example:

LiveDemo

The current behavior

The href of a and the style of divare not updated.

Even when I click:

image

I can see the href of state is /456 in console:

image

But the href of dom always keeps /123:

image

The expected behavior

The href of a to be /456 and the style of div to be color: red


It may not be a bug, but I want to know how to solve it?

In our business, it is inevitable that some dom node attributes are inconsistent between the server and the client, but we always hope that the page can respond to the results of the client render

Thanks a lot! 🙏🏻

eps1lon wrote this answer on 2022-11-30

This is likely caused by the previous hydration mismatch. When mismatches happen, React will not update attributes.

Does the issue persist if you fix the prior hydration mismatch?

aweiu wrote this answer on 2022-11-30

This is likely caused by the previous hydration mismatch. When mismatches happen, React will not update attributes.

Does the issue persist if you fix the prior hydration mismatch?

However, mismatches must exist, so we want to know how to let react update node attributes when mismatches exist?

image

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-12-01
Star Count 198482
Watcher Count 6646
Fork Count 41196
Issue Count 1106

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
The problem with render_reposing.py 1 2022-10-10 2022-11-12
How do I get it to accept my aoe2 installation? :D 3 2020-12-22 2022-07-20
[Feature Request] 屏蔽左上角小橙车弹窗 8 2022-10-09 2022-10-28
隐身入场和拦截直播观看数据上报均会导致特殊直播间直播画面不显示 3 2022-09-24 2022-10-28
Some nice ideias to add 2 2021-12-27 2022-11-11
Demo only in http:// 1 2022-02-14 2022-11-07
Make dependency to Leaflet.Draw optional 4 2018-03-01 2022-10-05
Uncaught TypeError: Cannot read property 'Poly' of undefined at leaflet.snap.js:336 1 2021-06-22 2022-10-05
Not message in the topic 10 2019-06-17 2022-11-25
Error running with --known_genotypes 2 2022-02-18 2022-04-24
Error creating an advanced sample project that uses TypeScript 7 2022-01-29 2022-09-24
Upgrade in node version from v7.7.3 to v8.16 1 2020-11-15 2022-10-29
npm ERR (node-sass: Command failed) after executing npm i 5 2021-08-28 2022-11-29
Npm package deployment broken 0 2022-05-03 2022-10-19
False positive for SC2009 : should cope with the use of pgrep for collecting pids and then grepping process details 2 2022-09-28 2022-10-21
Provided code example for detecting successful transactions is misleading 1 2022-06-09 2022-11-19
Broken links in readme 0 2017-08-15 2022-11-26
How to download 2 or more videos not in a playlist? 2 2021-02-14 2021-10-21
The minimum segment size and its influence on downloading performance: trade-offs based on segment size and segment number. 13 2021-02-18 2021-12-27
Contrats.... again! 3 2021-03-23 2021-11-21
Google drive support. 4 2021-03-11 2021-11-22
Completion auto-actions feature! 6 2021-03-05 2021-12-24
Create new elementary OS 6 screenshots 0 2021-09-05 2022-11-27
Xenops doesn't work with tkz-euclide package 0 2022-03-17 2022-11-27
Built project fails to import uuid package 4 2021-12-13 2022-10-02
Add support for Cabal to Haskell section 3 2021-09-28 2022-10-20
npm start just finishes, doesn't generate dist 0 2021-11-06 2022-11-23
Down sampling error 1 2021-06-17 2022-01-16
Where is Tag 3.91? 0 2021-08-03 2022-01-22
Invalid byte sequence in UTF-8 on db synchronize 17 2014-02-20 2022-11-14
"locheck discoverlproj" - Build failed Command PhaseScriptExecution failed with a nonzero exit code 3 2022-06-14 2022-11-26
Aliases are duplicating in the graph view and the searching result 9 2022-03-24 2022-10-31
Fix /careers redirect 0 2021-12-04 2022-10-26
"Hey google"feature is currently unavailable for this language 2 2022-02-12 2022-11-19
Drag-drop fields in group result in error 12 2021-10-03 2022-11-04
[Feature Request][SF]: support the css part for the `ui5-busy-indicator-root` 7 2022-07-26 2022-09-25
Push notification delay 6 2021-06-24 2022-11-27
start-all.sh unexpected hyphen 2 2021-04-14 2022-10-25
: Access Denied: Table <PROJECT_NAME>: Permission bigquery.tables.get denied on table <Project-name> (or it may not exist). 1 2022-06-24 2022-09-26
Nx Cache Inputs should include NX_* env vars and some others 8 2021-01-07 2022-10-30
Combine two Spring boms into one, spring-cloud-azure-dependencies. 1 2021-10-15 2022-10-14
How to inference on one GPU? 7 2020-12-02 2022-11-17
请问是否支持点击状态栏回到顶部 16 2020-12-14 2022-01-20
Flutter 2.6 1 2021-10-26 2022-01-12
speaker on/off not working on android 11 6 2021-04-22 2022-11-18
Release 4.3.0 - Release Candidate RC3 - Footprint Metrics - ROOTCHECK (4h) 0 2022-01-27 2022-10-04
Run action on more then one repository 1 2022-10-16 2022-11-17
markLine 的线条无法设置使其显示在 serise 下方 4 2021-06-17 2022-11-19
Cannot use a custom repository without an entity 1 2021-06-18 2022-11-28
[3.x] Add Site Commands to SDK 1 2021-04-19 2022-11-25