【実務導入】素のReactでXみたいな無限ローディング実装例

# cloneして
git clone https://github.com/wimpykid719/react-component.git

# パッケージのインストール
npm install

# アプリ起動
npm start

// 選択可能なポケモン一覧
// テーブル1に表示する選択肢一覧の並び順と連想配列でデータ操作する際のキーを配列で保持している
// この配列をmapしながらデータを表示
const pokemonNames = ['キー1', 'キー2', 'キー3', 'キー4'...]

// 連想配列にテーブル1で必要なデータを保持
// こうする事で選択可能なポケモンが増えていっても、データ操作はキーを使って行えるので、配列操作よりも早い
const pokemonObj = {
 キー１: {
         name: 'ポケモン名前',
         url: '詳細なURL',
         checked: false,　// チェックボックスの状態
        },
 キー2: {
         name: 'ポケモン名前',
         url: '詳細なURL',
         checked: false,
        },
 キー3: {
         name: 'ポケモン名前',
         url: '詳細なURL',
         checked: false,
        },
  キー4: {
         name: 'ポケモン名前',
         url: '詳細なURL',
         checked: false,
        },
}

// 選択中のポケモン一覧
// こちらはそこまでデータが追加されない仕様のため配列で保持している
const checkedPokemons = [
 {name: 'ポケモン名前', url: '詳細なURL'},
 {name: 'ポケモン名前', url: '詳細なURL'},
 {name: 'ポケモン名前', url: '詳細なURL'},...
]

<TableWrapper onScroll={onScroll}>
  <Table ref={tableRef}>
    <Thead>
      <Tr className="TrTh">
        <Th>ポケモン名</Th>
        <Th>詳細URL</Th>
      </Tr>
    </Thead>
    <Tbody>
      {pokemonNames.length === 0 ? (
        <Tr>
          <Td colSpan={2}>
            <NoPokemon>
              {isError
                ? "ネットワークエラー、ポケモンを取得できません"
                : "ポケモンが表示されます"}
            </NoPokemon>
          </Td>
        </Tr>
      ) : (
        pokemonNames.map((name) => (
          <SerachedTr
            className="TrTd"
            key={name}
            onClick={
              pokemonObj[name]?.checked
                ? () => removePokemon(pokemonObj[name]?.name)
                : () => addPokemon(pokemonObj[name])
            }
          >
            <Td>
              <Checkbox
                checked={!!pokemonObj[name]?.checked}
                label={pokemonObj[name]?.name || ""}
              ></Checkbox>
            </Td>
            <Td>{pokemonObj[name]?.url}</Td>
          </SerachedTr>
        ))
      )}
      {!isLoading && (
        <Tr>
          <TdLoading colSpan={2}>
            <LoaderWrapper>
              <LoadingCircle />
            </LoaderWrapper>
          </TdLoading>
        </Tr>
      )}
    </Tbody>
  </Table>
</TableWrapper>

const SCROLL_HEIGHT = 576;
...

const TableWrapper = styled.div`
  overflow-x: auto;
  max-width: 432px;
  width: 100%;
  border-radius: 4px;
  border: solid 1px #ccc;
  max-height: ${SCROLL_HEIGHT}px;
  overflow-y: scroll;
  margin-top: 20px;
  @media screen and (max-width: 1279px) {
    max-width: 600px;
  }
  @media screen and (max-width: 720px) {
    min-width: 290px;
  }
`;

const onScroll = async (e: React.UIEvent<HTMLDivElement>) => {
  if (!tableRef.current) return;
  const { scrollHeight, scrollTop, clientHeight } = e.currentTarget;
  if (
    clientHeight + scrollTop !== scrollHeight ||
    isLoading ||
    !url ||
    tableRef.current?.clientHeight < SCROLL_HEIGHT
  )
    return;
  await execFetchPokemon();
};

const execFetchPokemon = async () => {
  setIsLoading(true);
  await fetchPokemon(url);
  setIsLoading(false);
};
...

const fetchPokemon = async (url: string | undefined) => {
  try {
    if (!url) return;
    const response = await fetch(url);
    const data: PokemonFetchedData = await response.json();
    const nextUrl = data.next || undefined;
    setUrl(nextUrl);
    setPokemonObj((prePokemonObj) => {
      const newPokemonObj = pokemonSelectCheckedObj(
        data.results,
        checkedPokemons
      );
      return { ...prePokemonObj, ...newPokemonObj };
    });
    setPokemonNames((prePokemonNames) => {
      return [
        ...prePokemonNames,
        ...data.results.map((result) => result.name),
      ];
    });
  } catch {
    setIsError(true);
  }
};

<SerachedTr
  className="TrTd"
  key={name}
  onClick={
    pokemonObj[name]?.checked
      ? () => removePokemon(pokemonObj[name]?.name)
      : () => addPokemon(pokemonObj[name])
  }
>
  <Td>
    <Checkbox
      checked={!!pokemonObj[name]?.checked}
      label={pokemonObj[name]?.name || ""}
    ></Checkbox>
  </Td>
  <Td>{pokemonObj[name]?.url}</Td>
</SerachedTr>

// クリックされた要素のpokemonObjのcheckをチェックONの状態にする
// ２つ目のテーブルレイアウトに要素を追加する
const addPokemon = (pokemon: Pokemon | undefined) => {
  if (!pokemon) return;
  const pokemonName = pokemon.name;
  setPokemonObj((prePokemonObj) => {
    return {
      ...prePokemonObj,
      [pokemonName]: {
        name: prePokemonObj[pokemonName]?.name || "",
        url: prePokemonObj[pokemonName]?.url || "",
        checked: true,
      },
    };
  });
  setCheckedPokemons((preCheckedPokemons) => {
    const checkedPokemon = { name: pokemon.name, url: pokemon.url };
    if (!preCheckedPokemons) {
      return [checkedPokemon];
    } else {
      return [...preCheckedPokemons, checkedPokemon];
    }
  });
};

// クリックされた要素のpokemonObjのcheckをチェックOFFの状態にする
// ２つ目のテーブルレイアウトから要素を削除する
const removePokemon = (pokemonName: Pokemon["name"] | undefined) => {
  if (!pokemonName) return;
  setPokemonObj((prePokemonObj) => {
    return {
      ...prePokemonObj,
      [pokemonName]: {
        name: prePokemonObj[pokemonName]?.name || "",
        url: prePokemonObj[pokemonName]?.url || "",
        checked: false,
      },
    };
  });

  setCheckedPokemons((preCheckedPokemons) => {
    return preCheckedPokemons.filter(
      (checkedPokemon) => checkedPokemon.name !== pokemonName
    );
  });
};

<TableWrapper>
  <Table>
    <Thead>
      <Tr className="TrTh">
        <Th>ポケモン名</Th>
        <Th>詳細URL</Th>
      </Tr>
    </Thead>
    <Tbody>
      {!checkedPokemons || checkedPokemons.length === 0 ? (
        <Tr>
          <Td colSpan={2}>
            <NoPokemon>選択中のポケモンが表示されます</NoPokemon>
          </Td>
        </Tr>
      ) : (
        checkedPokemons.map((checkedPokemon) => (
          <Tr className="TrTd" key={checkedPokemon.name}>
            <PokemonNameTd>
              <RemoveButton
                onClick={() => removePokemon(checkedPokemon.name)}
              />
              {checkedPokemon.name}
            </PokemonNameTd>
            <Td>{checkedPokemon.url}</Td>
          </Tr>
        ))
      )}
    </Tbody>
  </Table>
</TableWrapper>