Reactフックを使用してsetStateを子コンポーネントに渡す

Question

setStateを小道具として子（ダムコンポーネント）に渡すことが、「ベストプラクティス」に違反しているか、最適化に影響するかどうか知りたいです。

これは、親コンテナがstateとsetStateを2つの子コンポーネントに渡し、子コンポーネントがsetState関数を呼び出す例です。

私は明示的に子でsetStateを呼び出さず、状態プロパティの正しい設定を処理するサービスを参照します。

export default function Dashboard() {

    const [state, setState] = useState({
        events: {},
        filters: [],
        allEvents: [],
        historical: false,
    });


    return (
        <Grid>
            <Row>
                <Col>
                    <EventsFilter
                        state={state}
                        setState={setState}
                    />
                    <EventsTable
                        state={state}
                        setState={setState}
                    />
                </Col>
            </Row>
        </Grid>
    )
}

ダッシュボードのsetStateサービスの例

function actions(setState) {
    const set = setState;
    return function () {
        return ({

            setEvents: (events) => set((prev) => ({
                ...prev,
                events,
            })),

            setAllEvents: (allEvents) => set((prev) => ({
                ...prev,
                allEvents,
            })),

            setFilters: (name, value) => set((prev) =>
                ({
                    ...prev,
                    filters
                })
            ),
        })
    }
}

これまでのところ、州の問題に気づいていません。

Answer 1

setState関数にデリゲートするハンドラー関数を作成し、この関数を子コンポーネントに渡すことをお勧めします。