JavaScriptで参照されたプリミティブ値を変更したい

Question

お世話になります。

React.jsでステートとして変更を管理したいがViewと直接関係はないので、useStateなどを使わずに変数を管理したいです。

一応実現方法として下記が挙げられると思います。

• グローバル変数を持つ
• クラスで変数を管理する
• クロージャーを使う

しかし僕がやりたいのはReact HooksのuseStateの様なインターフェースです。
下記の様なインターフェースを実現したいです。

const [color, setColor] = useLocalState('#000000');

つまりsetColorメソッドを呼び出すことによって、color、つまりプリミティブなオブジェクトを変更するというものです。

自分の方でオブジェクトのプロパティとして管理してみたり
bindを使って変数の更新を試みたのですが、難しく実現出来ませんでした。

React Hookのソースや、useStateの詳細についても調べて見ましたが、なかなかついていけませんでした。

丸投げ気味になってしまいまして申し訳ございません、どなたかご存じでしたらご教授ください。

Answer 1

useStateなどを使わずに変数を管理したいです。

素直にuseStateを使うべきだと思うのですが、それでは何がよくないのでしょうか。

「props」「state」「Context」以外のルートで外部の値を参照すると、それは変更を追随しませんので、定数以外の場合は不適当です。

Comments

[maisumakun]

作ろうとしているuseLocalStateが実現しようとしていて、useStateではできないことは、何なのでしょうか。

[nobodytolove123]

回答ありがとうございます。
再レンダリングが走るか否かですね、useLocalStateの場合は、レンダリング走りません。

[maisumakun]

でしたら、useRefでrefを用意しておいて、ref.current =で値を出し入れしてください（特にコンポーネントやDOM要素に限られず、任意の値を格納できます）。

[nobodytolove123]

今回のケースですと、ウィンドウのスクロール位置を変数で保存しておきたいのですが、onScrollイベントが発火するたびにsetStateをするのでは処理が重くなるというか、レンダリングは不必要と考えています。

[maisumakun]

https://ja.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

[nobodytolove123]

ありがとうございます！
refはDOMのみ適応の認識でしたが、間違えていました、、、