Reactのhooksで順番を処理の教えてください。

Question

Wrapperコンポーネント以下の子コンポーネント全てで先に共通処理をしたいのですが
例えば
console.log("最初に表示したい")

を先に表示させたいのですが、どのようにすればよろしいでしょうか？

import React, { useState, useEffect } from "react";

const Wrapper = () => {
  useEffect(() => {
    console.log("最初に表示したい");
  });

  return (
    <div>
      {console.log("後で表示したい")}
      <p>aaaaaaaa</p>
    </div>
  );
};

export default Wrapper;

Comments

[maisumakun]

なぜそのようなことをしたいのでしょうか（したいことによっては、やり方を変えたほうが適当です）。

[damarai0422]

return時に副作用を起こすことは基本ないと思います。

[roooo]

記載いたしました。

[maisumakun]

先にする「共通処理」はどのようなものでしょうか？

[roooo]

consoleの表示です。

[Kenji.Noguchi]

こんな風に、２番目の引数に空のリスト[]を入れたら、どうでしょう？useEffect(() => {
console.log("最初に表示したい");
}, []);

Answer 1

目的がよくわかっていませんが、先に表示したいということだけであれば、useEffectを使わずに書けば良いのではないでしょうか。useEffectの中に書いた処理は描画結果が反映された後に実行されます。

const Wrapper = () => {
  console.log("最初に表示したい")

  return (
    <div>
      {console.log("後で表示したい")}
      <p>aaaaaaaa</p>
    </div>
  );
};

Answer 2

consoleの表示です。

そもそも論として、return以下で返されるJSXの生成処理は冪等である（何回実行されても問題ない）べきものなので、そこにconsole.logを書いた場合、順番や実行回数の保証はありません。

つまり、ご提示のとおりにconsole.logを書いた場合、console.log("後で表示したい")が先に表示されようが2回実行されようが、それも想定の範囲内です。

Comments

[roooo]

先に表示したい。
を先に表示する方法はないと言うことでしょうか

[maisumakun]

はい、「console.log("後で表示したい")」の実行タイミングを考えること自体が間違っています。