react

利便性を高めるためにdataを永続化したい時があります。 今回は、next.jsとrecoilを使っていて、dataを永続化させる方法を紹介します。最初は`recoil-persist`を使っていたのですが、`recoil-persist`を使って、nextjsを使う場合は、ドキュメントに書いているやり方だと `Error: Hydration failed because the initial UI does not match what was rendered on the server. `のエラーが出てしまいます。

Line: React Hook useState cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks rules-of-hooksのエラーが起きる原因と解消方法の解説

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?というエラーが起きた時の対処方法。すごく簡単に対応できます。

react carouselを使おうとしても、Next.jsではそのままでは使えません。 公式ドキュメントの方法だと、Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.というエラーが出てしまいます。その際の解決方法を紹介します。

ReactMarkdownを使っていてそのcodeに対して、シンタックスハイライト（syntax-highlight）を適用する際に手こずったので、備忘録として残します。使うライブラリは、react-syntax-highlighter です。

Reactで画像を遅延ロードする方法はすごく簡単です。 しかもかなり効果があって、実際に利用した際に80%もの帯域幅の減少をすることができました。 スクロール時にのみに画像を表示させることで、帯域幅を減少させる方法もサンプルコードを踏まえて紹介します。