@makoxtiposted at 2022-04-30

React18で追加されたuseTransitionの使い方が不明

Q&A

Closed

解決したいこと

React18で追加されたuseTransitionの使い方を知りたいです。
以下の記事を読んでuseTransitionは画面遷移をする際、次の画面を表示する準備が完了するまで今表示している画面を表示し続けるものだと理解しました。

しかし、試しにコードを書いてみたのですが、思った通りの動きをしません。
コードに誤り等あればご教授いただけると幸いです。

◆useTransitionの使い方を紹介しているサイト
・https://qiita.com/uhyo/items/6be96c278c71b0ddb39b
・https://zenn.dev/engineer_titan/articles/19dc7a8359cf69
・https://www.ey-office.com/blog_archive/2021/07/14/preparation-for-react-18-review-transition/

該当するソースコード

Main.jsx

import React, { useEffect, useState, useTransition } from "react";
import SecondPage from "./SecondPage";

const Main = () => {
  const [showFlg, setShowFlg] = useState(false);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      setShowFlg(true);
      <SecondPage />;
    });
  };
  useEffect(() => {
    console.log(showFlg);
    showFlg && <SecondPage />;
  }, [showFlg]);
  return (
    <>
      {isPending ? "読み込み中" : "読み込み中ではない"}
      <button onClick={handleClick}>セカンドページへ</button>
    </>
  );
};

export default Main;

SecondPage.jsx

import React from "react";

const SecondPage = () => {
  return <p>セカンドページ</p>;
};

export default SecondPage;

自分で試したこと

上記のコードを実行し、セカンドページへボタンを押下したが何も起こらず。

期待値

セカンドページへボタンを押下すると、表示されている「読み込み中ではない」が「読み込み中」になる
SecondPage画面を表示する準備ができたら画面を切り替える

よろしくお願いします。

1Answer

@Verclene posted at 2022-04-30

startTransitionコールバックやuseEffect内でSecondPageを返しても,Reactには受け取る所がないので何も表示されません.

きちんとshowFlgを見て描画してやる必要があります.

//Main()
  return (
    <>
      {isPending ? "読み込み中" : "読み込み中ではない"}
      <button onClick={handleClick}>セカンドページへ</button>

      {showFlg ?? <SecondPage />}
    </>
  );

0Like

Comments

@makoxti
Questioner
@Vercleneさん
ありがとうございます！
思った通りに動くようになりました。

1つわからないのですが、NextPageではpタグでネクストページと表示させているだけです。
ですが、画面遷移すると以下の部分も表示されてしまうのですが、そう言うものなのでしょうか？
```
{isPending ? "セカンドページへ移動中" : "読み込み中ではない"}
<button onClick={handleClick} disabled={isPending}>
セカンドページへ
</button>
```
できればpタグのセカンドページだけを表示させたいのですが、読み込み中ではないとボタンを表示させない方法はありますでしょうか？
@Verclene
{!showFlg && ...}とかで囲んでやると一応できますが,MainからまるまるSecondPageに遷移したり(return <SecondPage/>するのとかまさにそれ)とか,条件分岐などを何でもMainに書き込んだりするのはあんまり綺麗じゃないです.Component同士の関係が分かりづらくなります.
最初のページも別のComponentに分離して,必要ならpropsを使うほうがReact的には綺麗に見えるかなと思います.(勿論見た目以上の意味があります)
具体的なコードについては参考リンクの3つ目に書かれています.

Reactはページを遷移しながら動くというよりは,1つのページでComponent同士が組み合わさって動くようなフレームワークなので,もしComponentへの理解が十分でないようでしたら,ドキュメントを読んでみてください.
@makoxti
Questioner
ありがとうございます。
componentについては理解が不足しているのでドキュメントを読んでみようと思います。

Are you sure you want to delete the question?