useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita

こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以前）は動くけどReact 18でアンチパターンに変貌するやり方なので、啓蒙するためにこの記事を用意しました。 ステート（コンポーネントのレンダリングに使用される値）は、useRefではなくuseState（またはuseReducer）をちゃんと使って管理するようにすれば、React 18以降も安泰です。 useRefをステート管理に使うパターンとは こういうやつです。 // 普通のやり方 const Counter1: React.VFC = () =

[tkmkg8m]

“useRefの中にステートを置いてuseStateまたはuseReducerを用いてコンポーネントを強制的に再レンダリングさせることでステート管理するというやり方は……トランジションと相性が悪いためアンチパターン”

[s025236]

これまでこうでしたがこれからはこうですが多すぎてReactに手が出せずangular派から抜け出せない

[isdh]

“useRefを用いてステート管理したものについては、トランジションの恩恵をうまく受けることができないのです。これは、useRefの中に入ったものはReactに「ステートである」と認識されていないからです。”

[for-my-internet-demo]

久々に触ったらこの辺わかんなくなってた

[xxxxxxxxlarge]

うわ、怖い怖い…。これは読んでおいて良かった。再レンダかけたくないときとかによくuseRef使ってた。こういう破壊的変更はちゃんとチェックしておかないとダメだわ。

[mayumayu_nimolove]

refってdom管理じゃ無かったっけ