t_wの輪郭

Feedlyでフォローするボタン
React
useEffectの第二引数をうまく使うとよろしいStrictModeによって開発時にuseEffectが２回呼び出される問題の解決方法『You Might Not Need an Effect』

うまくいったコード

const [post, set_post] = useState<Post | undefined>(undefined);
useEffect(() => {
    if (post==undefined && post_id) {
        (async () => {
            const post_db = (await API.graphql({
                query: getPost,
                variables: { id: post_id },
                authMode: "API_KEY",
                authToken: awsExports.aws_appsync_apiKey
            }) as GraphQLResult<GetPostQuery>).data?.getPost;
            if (post_db) {
                set_post(post_db)
            }
            console.log({ post_db });
        })();
    }
}, [post_id]);

うまくいかなかったコード（<Link>でDBが読み込まれなくなった・post==undefinedを外すと無限ループ）

const [post, set_post] = useState<Post | undefined>(undefined);
if (post==undefined && post_id) {
    (async () => {
        const post_db = (await API.graphql({
            query: getPost,
            variables: { id: post_id },
            authMode: "API_KEY",
            authToken: awsExports.aws_appsync_apiKey
        }) as GraphQLResult<GetPostQuery>).data?.getPost;
        if (post_db) {
            set_post(post_db)
        }
        console.log({ post_db });
    })();
}

参考にした