forwardRefは、以前、子コンポーネントのメソッドを叩こうとしたときに使ったことがあるのですが、今回は単純にrefを渡すだけの記事です。blog.kimizuka.orgただ、公式ドキュメントにもわかりやすい記事があるので、そちらを見た方が早いかもしれないです。j…

creareRefを使ってrefを要素分つくるのが良いみたいです。 import { createRef, useRef } from 'react'; const list = ['', '', '']; export default function Indexpage() { const listRefs = useRef([]); list.forEach((_, i) => { listRefs.current[i] = …

以前作ったカスタムフックが複雑すぎたのでシンプル版を作りました。blog.kimizuka.org useScroll.tsx import { useEffect, useState } from 'react'; export default function useScroll() { const [ scrollTop, setScrollTop ] = useState(0); const [ scr…

結論 childrenに型をつけなければならない場合は、 import { ReactNode } from 'react'; function Parent({ children }: { children: ReactNode }) { return ( <div>{ children }</div> ); という感じで、ReactNodeを使うことにしました。 ことの発端 Reactでコンポーネ…

ja.reactjs.orguseRefといえば、DOMにアクセスする手段としておなじみ ですが、なんとなく使い所がわかったようなわからないような気がしたのでメモを残しておきます。ja.reactjs.org1秒間に1回、useStateを使ってtextを更新するコードを書いた際、下記の書…

blog.kimizuka.org昨日は、React.callbackを使って子コンポーネントのレンダリングをスキップすることに成功しました。今回はその続きです。React.memoを使っても、子コンポーネントのレンダリングをスキップできないケースがあります。それが、propsとして…

ja.reactjs.org 先日、Next.js + PixiJS でアプリーケションを作っている際に、React.memoの使い所が言葉では無く、心で理解できた気がするのでメモを残しておきます。 React.memoとは もしあるコンポーネントが同じ props を与えられたときに同じ結果をレン…

コンポーネントにメソッドを定義できるuseImperativeHandle、refを別のコンポーネントに受け渡すforwardRefを使って実現します。ja.reactjs.org ja.reactjs.org ChildComponent（子） import { forwardRef, useImperativeHandle } from 'react'; export defa…