React | Tech and Everyday Blog by masahosono

React | masahosono blog

React18+Next.jsで「Hydration failed because the initial UI does not match what was rendered on the server.」エラーが発生したときの対処方法について。

React18にアップデートしてアプリケーションを起動したところ以下のエラーが表示されるようになった。
```
Error: Hydration failed because the initial UI does not match what was rendered on the server.
```

## 環境
- React 18.1.0
- Next.js 12.1.6

## エラー内容
```
Error: Hydration failed because the initial UI does not match what was rendered on the server.
```
直訳すると、「初期UIがサーバーでレンダリングされたものと一致しないため、ハイドレーションが失敗しました。」

> While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a feature of React.
> This can cause the React tree to be out of sync with the DOM and result in unexpected content/attributes being present.

[React Hydration Error](https://nextjs.org/docs/messages/react-hydration-error)

事前（SSRまたはSSG）にレンダリングされたReactツリーと、ブラウザで最初にレンダリングされたReactツリーが異なっているからだそう。
結果、ReactツリーがDOMと同期しなくなるので予期しないコンテンツが存在してしまう恐れがあるとのこと。

## 原因
現在日時のエポックミリ秒を返却するコードをサンプルとして説明する。
```javascript
import React, {useState} from 'react';

export const Index = () => {
    // 事前レンダリング時の日時とブラウザでレンダリング日時が不一致となる。
    const [nowDate, setNowDate] = useState(Date.now);
    return nowDate;
}

export default Index;
```

## 対処
useEffectを利用して不一致を回避する。
```javascript
import React, {useEffect, useState} from 'react';

export const Index = () => {
    // 事前レンダリング時の日時とブラウザでレンダリング日時を一致させる。
    const [nowDate, setNowDate] = useState(0);

    // useEffectを使いハイドレーション後にレンダリングがトリガーされるようにする。
    useEffect(() => {
        setNowDate(Date.now);
    }, []);

    return nowDate;
}

export default Index;
```

Next.jsの公式のsolution内容とほぼ同じ。
[React Hydration Error](https://nextjs.org/docs/messages/react-hydration-error)

React18+Next.jsでハイドレーションエラーが発生したときの対処

ブログ記事の投稿画面をReactで書いたときの導入手順について。日頃から文章をマークダウン記法で書くことが多かったので、同じ感覚で書けるエディタになるように実装した。今回は、react-simplemde-editorというライブラリが良さそうだったのでそちらを採用。


ブログ記事の投稿画面をReactで書いたときの導入手順について。

日頃から文章をマークダウン記法で書くことが多かったので、同じ感覚で書けるエディタになるように実装した。

1からエディタを作ることも考えたが、[react-simplemde-editor](https://github.com/RIP21/react-simplemde-editor)というライブラリが良さそうだったので今回はそちらを採用した。

## 環境
* [React](https://github.com/facebook/react) v16.13.1
* [react-simplemde-editor](https://github.com/RIP21/react-simplemde-editor) v4.1.3

## 導入

```shell
$ yarn add react-simplemde-editor
```

```javascript:index.ts
import React from "react";
import SimpleMDE from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";

const MarkdownEditor = () => {
    return <SimpleMDE id="simple-mde" />;
}
export default MarkdownEditor;
```

起動してブラウザを開くとエディタが表示される。

![img.png](img.png)

### 初期値を表示
SimpleMDEコンポーネントのvalue属性に文字列や変数を指定すると、初期値としてエディタに表示される。
```javascript:index.ts
const MarkdownEditor = () => {
    const [value, setValue] = useState("Initial value");
    
    return <SimpleMDE id="simple-mde" value={value} />;
}
```

### 入力値を変数に代入
SimpleMDEコンポーネントのonChangeに指定したコールバック関数がエディタの内容が変更されるたびに実行される。コールバック関数は引数にエディタ内の文字列を持つので、更新用関数に渡してstate変数に展開させる。
```javascript:index.ts
const MarkdownEditor = () => {
    const [value, setValue] = useState("Initial value");

    const onChange = useCallback((value: string) => {
        setValue(value);
    }, []);

    return <SimpleMDE id="simple-mde" value={value} onChange={onChange} />;
}
```

### 画像をクリップボード経由またはドラッグ＆ドロップで貼り付ける
Qiitaの記事投稿画面のように画像をクリップボード経由かドラッグ＆ドロップで貼り付けられるようにした。

SimpleMDEには複数のイベントリスナーが標準で用意されており、SimpleMDEコンポーネントのevents属性に任意のイベント種別とコールバック関数を指定することで利用できる。
今回は、クリップボード貼り付けとドラッグ＆ドロップを利用したかったのでdropとpasteを指定した。

コールバック関数内では対象が画像ファイルであるかのチェックとファイルのBLOBを取得し、画像アップロードを非同期で行わせる。
画像アップロード処理は下記コードでは割愛。画像アップロードが成功すると画像URLが返却されるようにした。

画像は`![](画像URL)`の形式で本文中に挿入したかったのでreplaceSelection関数を利用。replaceSelectionはインスタンス関数なのでSimpleMDEのインスタンスを予め用意する必要がある。SimpleMDEコンポーネントのgetMdeInstance属性にコールバック関数を指定することでインスタンスが取得できるのでブロック変数に代入して利用する。

```javascript:index.ts
const MarkdownEditor = () => {

    let simpleMde: EasyMDE;
    const getInstance = (instance: EasyMDE) => {
        simpleMde = instance;
    };

    const [value, setValue] = useState("Initial value");

    const onChange = useCallback((value: string) => {
        setValue(value);
    }, []);
    
    const uploadImage = async () => {
        try {
            // 画像アップロード処理を実行
        } catch (error) {
        }
    }

    const handleDrop = (data, e) => {
        if (e.clipboardData.files === undefined || e.clipboardData.files.length === 0) {
            return;
        }

        const files = e.dataTransfer?.files;
        const file = files[0];

        if (
            file.type === "image/png" ||
            file.type === "image/jpeg" ||
            file.type === "image/gif"
        ) {
            const uploadedImageUrl = uploadImage();
            simpleMde.codemirror.replaceSelection("![](" + uploadedImageUrl + ")");
        }
    };

    const handlePaste = (data, e) => {
        if (e.clipboardData.files === undefined || e.clipboardData.files.length === 0) {
            return;
        }

        const files = e.clipboardData.files;
        const file = files[0];

        if (file.type === "image/png") {
            const uploadedImageUrl = uploadImage();
            simpleMde.codemirror.replaceSelection("![](" + uploadedImageUrl + ")");
        }
    };

    return<SimpleMDE
        id="simple-mde"
        getMdeInstance={getInstance}
        value={value}
        onChange={onChange}
        events={{ drop: handleDrop, paste: handlePaste }} />;
}
```

## あとがき
react-simplemde-editorを採用したおかげで手間をかけることなく要件が満たせたエディタが作れたと思う。
公式ドキュメントを見ると他にも色々な機能がありそうなので今後試していきたい。