株式会社ナレッジワークPublication Pro✨SPA Componentの推しディレクトリ構成について語るよしこ2021/10/29に公開3件JavaScriptNext.jsReactTypeScriptfrontendtech株式会社ナレッジワークPublication Pro株式会社ナレッジワークは「LIFE WITH ENABLEMENT できる喜びが巡る日々を届ける」をミッションに、セールスイネーブルメントAI「ナレッジワーク」を開発・提供しています。本ブログでは、ナレッジワークの技術情報を発信しています。Discussionmisuken2021/10/29こんにちは。 useMemo useCallback のお話、とてもわかる部分が大きいのでコメントさせていただきます。 hooks は使っていけばいくほど、難しさに直面する人は多いようで、自分の周りの人も結構どう書くのが良いか迷ってる人多いですね。 ちゃんと書こうとすると簡単なことしたいだけでも、こんなに書かないといけないのか…となったり。レビューで安全かどうか見るのが大変だったり。 eslint で deps チェックしてくれるとは言え、直書きの useMemo useCallback などが対象なので、カスタムフックで deps を使うと一気にリスクが上がるなど、ちゃんと書けてるかを担保するコストが意外と大きいなと感じています。 さらに、ちゃんと書いているつもりでも、一箇所でも穴があると無駄な再描画に繋がるし、その割にパフォーマンス的に困ってない場所で頑張るのも無駄感あるし、塩梅みたいなところが出てくるとそれはそれでまた方針などに悩みます。 そんな中、ちょうど先日 useCallback の調べごとをしているときに以下の issue にたどり着きました。 https://github.com/facebook/react/issues/16956 2019年から議論しているようですが、 useCallback の使い方について色々書かれています。 主にイベント系のコールバックなど、描画内容に影響を与えない関数の場合、useRef と組み合わせて使えるととても簡潔に書けるようになるが、 useLayoutEffect が子から親に向かって実行されていくのでうまくいかないとか、 render 中に ref.current を更新した場合は Concurrent Mode のときにおかしくなるとか、議論を追っていくとややこしさ満載です。 途中で deps や useMemo を全て自動で補完するような最適化が入ればエンジニアが考えることがすごく減るみたいな夢のようなことも書いてありますが、現実的とは思えませんしね。 一応 useRef と組み合わせる場合、 useLayoutEffect の直前のタイミングで親から子の方向に実行される機構が追加されると成立しそうということはわかりましたが、どう着地するのか気になります。 返信を追加trick.master2022/08/05reactを学ぶビギナーです。 教えていただきたいことがございます。 components/pageで*.stories.tsxを配置されておりますが こちらはどんな役割を担うファイルとなりますでしょうか。 leon_d2022/09/15storyBookじゃないですか？ 返信を追加
misuken2021/10/29こんにちは。 useMemo useCallback のお話、とてもわかる部分が大きいのでコメントさせていただきます。 hooks は使っていけばいくほど、難しさに直面する人は多いようで、自分の周りの人も結構どう書くのが良いか迷ってる人多いですね。 ちゃんと書こうとすると簡単なことしたいだけでも、こんなに書かないといけないのか…となったり。レビューで安全かどうか見るのが大変だったり。 eslint で deps チェックしてくれるとは言え、直書きの useMemo useCallback などが対象なので、カスタムフックで deps を使うと一気にリスクが上がるなど、ちゃんと書けてるかを担保するコストが意外と大きいなと感じています。 さらに、ちゃんと書いているつもりでも、一箇所でも穴があると無駄な再描画に繋がるし、その割にパフォーマンス的に困ってない場所で頑張るのも無駄感あるし、塩梅みたいなところが出てくるとそれはそれでまた方針などに悩みます。 そんな中、ちょうど先日 useCallback の調べごとをしているときに以下の issue にたどり着きました。 https://github.com/facebook/react/issues/16956 2019年から議論しているようですが、 useCallback の使い方について色々書かれています。 主にイベント系のコールバックなど、描画内容に影響を与えない関数の場合、useRef と組み合わせて使えるととても簡潔に書けるようになるが、 useLayoutEffect が子から親に向かって実行されていくのでうまくいかないとか、 render 中に ref.current を更新した場合は Concurrent Mode のときにおかしくなるとか、議論を追っていくとややこしさ満載です。 途中で deps や useMemo を全て自動で補完するような最適化が入ればエンジニアが考えることがすごく減るみたいな夢のようなことも書いてありますが、現実的とは思えませんしね。 一応 useRef と組み合わせる場合、 useLayoutEffect の直前のタイミングで親から子の方向に実行される機構が追加されると成立しそうということはわかりましたが、どう着地するのか気になります。 返信を追加
trick.master2022/08/05reactを学ぶビギナーです。 教えていただきたいことがございます。 components/pageで*.stories.tsxを配置されておりますが こちらはどんな役割を担うファイルとなりますでしょうか。 leon_d2022/09/15storyBookじゃないですか？ 返信を追加
Discussion
こんにちは。
useMemo useCallback のお話、とてもわかる部分が大きいのでコメントさせていただきます。
hooks は使っていけばいくほど、難しさに直面する人は多いようで、自分の周りの人も結構どう書くのが良いか迷ってる人多いですね。
ちゃんと書こうとすると簡単なことしたいだけでも、こんなに書かないといけないのか…となったり。レビューで安全かどうか見るのが大変だったり。
eslint で deps チェックしてくれるとは言え、直書きの useMemo useCallback などが対象なので、カスタムフックで deps を使うと一気にリスクが上がるなど、ちゃんと書けてるかを担保するコストが意外と大きいなと感じています。
さらに、ちゃんと書いているつもりでも、一箇所でも穴があると無駄な再描画に繋がるし、その割にパフォーマンス的に困ってない場所で頑張るのも無駄感あるし、塩梅みたいなところが出てくるとそれはそれでまた方針などに悩みます。
そんな中、ちょうど先日 useCallback の調べごとをしているときに以下の issue にたどり着きました。 2019年から議論しているようですが、 useCallback の使い方について色々書かれています。
主にイベント系のコールバックなど、描画内容に影響を与えない関数の場合、useRef と組み合わせて使えるととても簡潔に書けるようになるが、 useLayoutEffect が子から親に向かって実行されていくのでうまくいかないとか、 render 中に ref.current を更新した場合は Concurrent Mode のときにおかしくなるとか、議論を追っていくとややこしさ満載です。
途中で deps や useMemo を全て自動で補完するような最適化が入ればエンジニアが考えることがすごく減るみたいな夢のようなことも書いてありますが、現実的とは思えませんしね。
一応 useRef と組み合わせる場合、 useLayoutEffect の直前のタイミングで親から子の方向に実行される機構が追加されると成立しそうということはわかりましたが、どう着地するのか気になります。
reactを学ぶビギナーです。
教えていただきたいことがございます。
components/pageで*.stories.tsxを配置されておりますが
こちらはどんな役割を担うファイルとなりますでしょうか。
storyBookじゃないですか？