Reactは初回レンダリングを特別扱いしない

1. useState + useEffect -> 再レンダリング中に毎回計算 (重ければ useMemo)

code:before.tsx

const fullName, setFullName = useState("");

useEffect(() => {

setFullName(familyName + " " + personalName);

code:after.tsx

const fullName = familyName + " " + personalName;

2. useEffect を「マウント時の処理」と捉えるべきでない -- 原則として「マウント時の初期化処理」はない

例外: useState の初期値・initializer関数(初期化関数)を使った初期化

初期値の固定

code:tsx

const TaskEditForm: FC<Props> = ({ defaultValues }) => {

const values, setValues = useState<TaskEditFormValues>(defaultValues);

// 以下略

(レンダリング結果を左右しなければ)初期化関数でアレコレできる

code:tsx

function App() {

const queryClient = useState(() => new QueryClient())

return (

</QueryClientProvider>

)

}

エフェクトは「マウント時の初期化処理」を書くものではない

「マウント時」 +「更新時」を一体のものとして捉えるのがエフェクト

「レンダリングのたびに、補足されたリアクティブ値が変われば、それに応じて再実行するもの」と捉えるべき

本当に欲しかったのは「当該ステートが初期状態のとき、実行しない」では？

XY 問題

code:typescript

const roomId, setRoomId = useState("");

useEffect(() => {

if (!roomId) return;

const disconnect = connectToChat(roomId);

return () => {

disconnect();

}