[React Hooks]localStorageに登録した時にコンポーネントを再レンダリングしたい

Question

前提・実現したいこと

localStorageにデータを登録した時にそのデータを描画するコンポーネントを再レンダリングしたいのですが、現状は更新ボタンを押している状況です。
setStateなどを使わないといけないんでしょうか。
わかる方がいましたらコメントお願いします。

発生している問題・エラーメッセージ

自分で更新ボタンを押しています

該当のソースコード

export default function App() {

const handleSubmit = () => {
    
    let obj = {
      sample: 'sample'
      }
    };

      let setjson = JSON.stringify(obj);
      localStorage.setItem('hoge', setjson);　//ここで登録した後下のコンポーネントを再レンダリングしたい
    
  }

return (
    ...
<Card> //これを再レンダリングしたい

Answer 1

setStateなどを使わないといけないんでしょうか。

はい。localStorage に登録した内容を state としても持っておいて、それを使って描画するようにすれば、setState した時に自動的に描画も更新されます。
(ってのは話が逆で、普通は state の内容を永続化するために localStorage を使うんだと思います。)

Comments

[jun68ykt]

こんにちは。
横からすみません。

探してみると、コンポーネントのstateとlocalStorageを同期させるようなカスタムフックを書く事例がみつかります。
https://usehooks.com/useLocalStorage/
だったり
https://youtu.be/kQKs7o-X0zc
などです。後者の動画は順を追って localStorage の処理を追加してるのを見れるので分かり易いです。
ご参考まで。

[aiai8976]

ご丁寧にありがとうございました。