reactjs

Eslintでformatに関してはreportしてくれますが、typescriptのtypeエラーは出してくれなかったりします。これらはbuild時に出るエラーで、気軽に確認できると開発が楽になります。そこで、typescriptのtype errorを感知する方法を紹介します。すごく簡単で、yarn run tsc --noemit

useRefを使ったコードでは、Type error: inputFile.current is possibly null.のようなbuildエラーが出るときがあります。その時の対処方法を紹介します。対処方法は簡単で、HTMLElementの型をつけてあげれば解消できます。

ReactのuseMemoがどういう役割を持っていて、いつどのような状況の時に使うべきかを紹介します。useMemoはその名の通りmemo化をするもので、関数の結果をメモ化する時に使います。重たい処理がありその結果を都度計算したくなく、ある状態が変化した時だけ再計算してつかいた時に使うものです。下記を見てもらえれば、useMemoがどのようなものかわかるかと思います。

ReactのuseCallbackの役割とuseCallbackをいつ使えば良いのかを紹介したいと思います。 主にuseCallbackはuseCallback(fn, deps)で定義され、despが変わらない限り、新しい関数のインスタンス(fn)を作りません。これだけだと、なんのために存在しているかわからないと思います。 useCallbackが主に解決している問題を紹介します。Memo化したコンポーネントが親で作成した関数をpropsとして指定しているばかりに、Memo化したにも関わらず、親が再描画されたときに子コンポーネントも意図せずに再描画されてしまいパフォーマンスが低下する問題があります。これを解決するのがuseCallbackの主な役割です。

React.memoはReactでDOMをレンダーのパフォーマンスを最適化する際に使われます。 すなわち、React.memoを適切に使うことで、viewの描画速度を早めることでき、 ユーザの利便性や体験を向上させることができます。ただし、正しく使わないと最適化できないので、React.memoの正しい使い方を例を交えて紹介したいと思います。例えば、下記のように好きな食べ物を表示するコンポーネント(FavaoriteFood)があり...

Reactで複数のクラスをclassNameに追加する方法を紹介します。 複数のクラスを追加する方法はとても単純で、template literalsを使うだけです

React.jsでコメントアウトする方法を紹介します。 特にReactのJSXにてコメントアウトする方法を紹介します。とても簡単で、下記のように{/* */}で囲むとその中の部分をコメントアウトをすることができます

React.jsの`useEffect`内で`async`,`await`を使った関数を実行する方法を紹介します。 やり方は簡単で`async`で定義した関数をuseEffectの中で呼び出してあげるだけです。

React.jsで`componentDidMount`を`UseEffect`で代用する方法を紹介します。`componentDidMount`を`UseEffetct`で代用する方法はとても簡単です。`useEffect(() => { }, [])`とするだけで代用ができます。ポイントは`[]`の部分です。これをuseEffectの第二引数に渡すことで、更新時には更新されずに無限ループのようにひたすら更新し続けられるというのを避けることができます。