jotaiライブラリーのuseHydrateAtomsを勉強した

自己紹介

私は41歳から独学でプログラミングをはじめ現在45歳。
最近やっと自分でアプリをく作れるようになってきました。

この記事はuseHydrateAtomsの使い方の備忘録です。
間違いあるかもしれませんので、ご了承ください。

概要

フルスタックで自作アプリを作成した時に
フロントエンドとバックエンドを状態が初期状態で不一致していて困ったことがありました。
それを解消するために、
ブラウザ起動後、すぐにバックエンドのデータをフェッチする方法で動作的には問題なくなりました。
でも、フェッチ完了するまでの間に古い状態（フロントが持っている初期状態）が一瞬チラ見えするのが
美しくないなあと思って、いろいろ調べた結果、
useHydrateAtomを見つけました。

下準備

まずは普通に書くと以下３つのコード。
「hoge hoge]が一瞬チラ見えします。

App.jsx

import './App.css';
import { User } from './components/User';

function App() {
  return (
    <>
      <User/>
    </>
  );
}

export default App;

import { atom } from 'jotai';

export const userAtom = atom([
  {
    id: 100,
    name: 'hogo hoge',
    username: 'foo',
    email: 'aaa@aaa.com',
  }
]);

User.jsx(修正前)

import React, {useEffect} from 'react';
import { useAtom } from 'jotai';
import { userAtom } from '../atoms/usersAtom';
import axios from 'axios';

export const User = () => {
  const url = 'https://jsonplaceholder.typicode.com/users';
  const [userData, setUserData] = useAtom(userAtom);
  useEffect(() => {
    const fetchData = async (url) => {
      const response = await axios.get(url);
      setUserData(() => [...response.data]);
    };
    fetchData(url);
  }, []);
  return (
    <div>
      {userData.map((user) => {
        return <li key={user.id}>{user.name}</li>;
      })}
    </div>
  );
};

useHydrateAtomsを使って修正

こちらに書き換えるとチラ見えがなくなりました。

User.jsx(修正後)

import React from 'react';
import { useAtom } from 'jotai';
import { useHydrateAtoms } from 'jotai/utils';
import { userAtom } from '../atoms/usersAtom';
import axios from 'axios';

export const User = () => {
  const url = 'https://jsonplaceholder.typicode.com/users';
  const fetchData = async (url) => {
    const response = await axios.get(url);
    return response.data;
  };
  useHydrateAtoms([[userAtom, fetchData(url)]]);
  const [userData] = useAtom(userAtom)
  return (
    <div>
      {userData.map((user) => {
        return <li key={user.id}>{user.name}</li>;
      })}
    </div>
  );
};

コードの特徴

修正前

useAtomを使ってデータ呼び出し
useEffectを使う
fetchしてAtomを書き換える非同期関数を宣言して実行

修正後

useAtomを使ってデータ呼び出しは後で。
useEffectは使わない
fetchしてデータを返す関数を宣言
useHydrateAtomsを実行
リストを引数に入れる
アトムとデータを入れる
ここでuseAtomを使ってデータを呼び出し。

感想

修正前のコードの書き方に慣れていたので、修正後のコードの書き方にはなかなか慣れませんでした。
でもコード量もそんなに変わらないので、慣れていこうかと思います。