React: １つの state に対して複数箇所で useEffect / setState すると最終的に有効なのはどの値か
February 21, 2022
試行その１ #
import { useState, useEffect } from 'react';
export default function Component() {
const [int, setInt] = useState<number>();
useEffect(() => setInt(1), []);
useEffect(() => setInt(3), []);
useEffect(() => setInt(2), []);
console.log(int);
return <></>;
}
結果その１ #
コンソールには以下の順番で出力されます。
undefined
2
初回レンダリングは undefined となっているとして、次のレンダリングでは最後に指定された setState の結果が有効となるようです。
試行その２ #
子のコンポーネントでも setState するとどうなるでしょうか。
import { useState, useEffect } from 'react';
export default function Parent() {
const [int, setInt] = useState<number>();
useEffect(() => setInt(1), []);
useEffect(() => setInt(3), []);
useEffect(() => setInt(2), []);
console.log(`Parent ${int}`);
return <Child int={int} setInt={setInt} />;
}
type Props = {
int: number | undefined;
setInt: React.Dispatch<React.SetStateAction<number | undefined>>;
};
function Child(props: Props) {
const { int, setInt } = props;
useEffect(() => setInt(10), []);
useEffect(() => setInt(30), []);
useEffect(() => setInt(20), []);
console.log(`Child ${int}`);
return <></>;
}
結果その２ #
コンソールには以下の順番で出力されます。
Parent undefined
Child undefined
Parent 2
Child 2
最終結果は 20 になると思っていたので予想外でした。
試行その３ #
どの順番で useEffect が動いているかを確認してみます。
import { useRef, useEffect } from 'react';
export default function Parent() {
const int = useRef<number[]>([]);
useEffect(() => {
int.current.push(1);
}, []);
useEffect(() => {
int.current.push(3);
}, []);
useEffect(() => {
int.current.push(2);
}, []);
setTimeout(() => {
console.log(int.current);
}, 1000);
return <Child int={int} />;
}
function Child({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(10);
}, []);
useEffect(() => {
int.current.push(30);
}, []);
useEffect(() => {
int.current.push(20);
}, []);
return <></>;
}
結果その３ #
コンソールには以下の順番で出力されます。
[]
[10, 30, 20, 1, 3, 2]
試行その４ #
孫コンポーネントまで用意し同じことを試してみます。
import { useRef, useEffect } from 'react';
export default function Parent() {
const int = useRef<number[]>([]);
useEffect(() => {
int.current.push(1);
}, []);
useEffect(() => {
int.current.push(3);
}, []);
useEffect(() => {
int.current.push(2);
}, []);
setTimeout(() => {
console.log(int.current);
}, 1000);
return <Child int={int} />;
}
function Child({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(10);
}, []);
useEffect(() => {
int.current.push(30);
}, []);
useEffect(() => {
int.current.push(20);
}, []);
return <Grandchild int={int} />;
}
function Grandchild({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(100);
}, []);
useEffect(() => {
int.current.push(300);
}, []);
useEffect(() => {
int.current.push(200);
}, []);
return <></>;
}
結果その４ #
コンソールには以下の順番で出力されます。
[]
[100, 300, 200, 10, 30, 20, 1, 3, 2]
試行その５ #
親は２つの子を持ち、子は２つの孫を持つ状態で実行してみます。
import { useRef, useEffect } from 'react';
export default function Parent() {
const int = useRef<number[]>([]);
useEffect(() => {
int.current.push(1);
}, []);
setTimeout(() => {
console.log(int.current);
}, 1000);
return (
<>
<Child1 int={int} />;
<Child2 int={int} />;
</>
);
}
function Child1({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(10);
}, []);
return (
<>
<Grandchild11 int={int} />;
<Grandchild12 int={int} />;
</>
);
}
function Child2({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(20);
}, []);
return (
<>
<Grandchild21 int={int} />;
<Grandchild22 int={int} />;
</>
);
}
function Grandchild11({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(110);
}, []);
return <></>;
}
function Grandchild12({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(120);
}, []);
return <></>;
}
function Grandchild21({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(210);
}, []);
return <></>;
}
function Grandchild22({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(220);
}, []);
return <></>;
}
結果その５ #
コンソールには以下の順番で出力されます。
[]
[110, 120, 10, 210, 220, 20, 1]
試行その６ #
しつこくなってきたのでこれで最後です。親は２つの子を持ち、子は２つの孫を持ち、孫は２つのひ孫を持つ状態で実行してみます。
import { useRef, useEffect } from 'react';
export default function Parent() {
const int = useRef<number[]>([]);
useEffect(() => {
int.current.push(1);
}, []);
setTimeout(() => {
console.log(int.current);
}, 1000);
return (
<>
<Child1 int={int} />;
<Child2 int={int} />;
</>
);
}
function Child1({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(10);
}, []);
return (
<>
<Grandchild11 int={int} />;
<Grandchild12 int={int} />;
</>
);
}
function Child2({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(20);
}, []);
return (
<>
<Grandchild21 int={int} />;
<Grandchild22 int={int} />;
</>
);
}
function Grandchild11({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(110);
}, []);
return (
<>
<GreatGrandchild111 int={int} />
<GreatGrandchild112 int={int} />
</>
);
}
function Grandchild12({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(120);
}, []);
return (
<>
<GreatGrandchild121 int={int} />
<GreatGrandchild122 int={int} />
</>
);
}
function Grandchild21({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(210);
}, []);
return (
<>
<GreatGrandchild211 int={int} />
<GreatGrandchild212 int={int} />
</>
);
}
function Grandchild22({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(220);
}, []);
return (
<>
<GreatGrandchild221 int={int} />
<GreatGrandchild222 int={int} />
</>
);
}
function GreatGrandchild111({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(1110);
}, []);
return <></>;
}
function GreatGrandchild112({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(1120);
}, []);
return <></>;
}
function GreatGrandchild121({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(1210);
}, []);
return <></>;
}
function GreatGrandchild122({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(1220);
}, []);
return <></>;
}
function GreatGrandchild211({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(2110);
}, []);
return <></>;
}
function GreatGrandchild212({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(2120);
}, []);
return <></>;
}
function GreatGrandchild221({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(2210);
}, []);
return <></>;
}
function GreatGrandchild222({ int }: { int: React.MutableRefObject<number[]> }) {
useEffect(() => {
int.current.push(2220);
}, []);
return <></>;
}
結果その６ #
コンソールには以下の順番で出力されます。
[]
[1110, 1120, 110, 1210, 1220, 120, 10, 2110, 2120, 210, 2210, 2220, 220, 20, 1]
まとめ #
最後の試行結果を視覚化して終わりとします。
以下の階層構造・順番でコンポーネントが構成されており、それぞれで useEffect を実行している場合は、
Parent
├ Child1
│ ├ Grandchild11
│ │ ├ GreatGrandchild111
│ │ └ GreatGrandchild112
│ └ Grandchild12
│ ├ GreatGrandchild121
│ └ GreatGrandchild122
└ Child2
├ Grandchild21
│ ├ GreatGrandchild211
│ └ GreatGrandchild212
└ Grandchild22
├ GreatGrandchild221
└ GreatGrandchild222
以下の順番で useEffect が実行されます。
GreatGrandchild111
GreatGrandchild112
Grandchild11
GreatGrandchild121
GreatGrandchild122
Grandchild12
Child1
GreatGrandchild211
GreatGrandchild212
Grandchild21
GreatGrandchild221
GreatGrandchild222
Grandchild22
Child2
Parent