みかづきブログ・カスタム

基本的にはちょちょいのほいです。

React

Reactでchildrenにpropsを渡す 👨‍👩‍👧

基本的には、React.cloneElementを使い、propsを固定した状態のcomponentを作るのがセオリーのようです。ja.reactjs.orgイメージ的には、Function.prototype.bindを使って引数を固定した関数を作るのに似ている気がしました。developer.mozilla.org実際に例…

forwardRefを使って子コンポーネントにrefを渡す 👦

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

ループで生成した要素にuseRefを使う 🔁

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 useResize() { const [ scrollTop, setScrollTop ] = useState(0); const [ scr…

TypeScriptでReactを開発するとき、childrenの型をどうするか考える 👦

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

useRefの使い所 📝

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

useCallbackの使い所 📝

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

React.memoの使い所 📝

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

React Hooksで子コンポーネントにメソッドを定義して親コンポーネントから叩く 🔨

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