Partial Hydrate したいコンポーネントにspaceが含まれているときにreact-domが"Text content did not match"のWarningを吐く #127
Description
// components/block-counter.tsx
import { useState, useCallback } from "react"
export default () => {
const [count, setCount] = useState(0)
const increment = useCallback(() => setCount((c) => c + 1), [])
return (
<div className="block-counter">
<button onClick={increment} type="button">
increment
</button>
<p>count: {count}</p>
</div>
)
}このコンポーネントを?phをつけてインポートしブラウザで表示すると、以下のWarningが出ます。
Warning: Text content did not match. Server: "count:" Client: "count: "
以下のように変更すると、Warningが出なくなります。
- <p>count: {count}</p>
+ <p>count:{count}</p>どなたかウォーニングを出さないための回避策ご存知ないでしょうか？