13

I'm curious if passing setState as a prop to a child (dumb component) is violating any "best practices" or will affect optimization.

Here is an example where I have the parent container passing state and setState to two child components, where the child components will call the setState function.

I do not explicitly call setState in the children, they reference a service to handle the correct setting of state properties.

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>
    )
}

Example of dashboard setState service

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
                })
            ),
        })
    }
}

So far I haven't noticed any state issues.

Nicholas Porter
  • 2,588
  • 2
  • 23
  • 37
  • 1
    I think it is not wrong if we call `setState` a prop from the child's point of view. And if the child set its own state from prop then update it(which is the usual React flow so far) then that child is not dumb anymore. it might make coding faster but it will reduce the readability. – ilkerkaran Jan 22 '20 at 00:14

2 Answers2

3

A good practice would encompass you creating a handler function which delegates to the setState function and passing this function to the child component.

Purvil Bambharolia
  • 653
  • 4
  • 14
  • 13
    And why exactly is this a good practice? What does it improve? – Nicholas Porter Jan 21 '20 at 23:57
  • 5
    There's two reasons why this is a good idea: 1) Passing the setState function tightly couples the child component to the parent component, across a component boundary. They're no longer independent units, so at this point you should ask yourself - should they be two separate components at all? 2) [more practical] - It takes away flexibility on what actions the parent can take when the event occurs. For example, it would be reasonable for the parent to need: 'on event, set state and also display an alert'. If the interface is `onX`, you can do this. If it's `setState`, you can't. – Nate Mar 23 '22 at 13:31
2

It is ok to call a function from the child to set the state of the parent, however there is a couple things to keep in mind when doing this

1) I hope you aren't actually calling the function as "setState" as generally you don't want to this, from a purely syntactical standpoint

2) Realize that you are affecting the state of the parent and not the child when calling the function from within the child. This could lead to some funky results if you lose track of what data you are intending to manipulate and from where.

BRose
  • 227
  • 2
  • 12
  • Thanks! Yeah I should add that in that I'm not calling setState directly. I've created a service for distinguishing which state property to set. – Nicholas Porter Jan 22 '20 at 00:04