React – You won’t want that many states!

You most likely know to not use one single state for all the things a element wants.
However in avoiding that, typically you’re feeling compelled to separate the state in a single for every factor you want.

However you don’t want to try this!

When you have issues that change collectively, then you find yourself setting a “waterfall“ of occasions that could possibly be bundled collectively.

The shape instance:

Let’s say you’ve got this manner instance:

perform FormExample(){
    ???

    return (
        <type>
            <enter title="data1" />
            <enter title="data2" />
            <enter title="data3" />
        </type>
    )
}

You possibly can have it cut up into three states:

const [data1, setData1] = useState(data1Default)
const [data2, setData2] = useState(data2Default)
const [data2, setData3] = useState(data3Default)

However you would additionally:

const [allData, setAllData] = useState(dataDefault)
// after which...
const updateData = (occasion) => {
    setAllData((oldState) => ({
        ...oldState, 
        [event.target.name]: occasion.goal.worth
    }))
}

With this, so long as you title the inputs you possibly can replace all of the state in a single go.

And it doesn’t should be a type, wherever the information will all the time change collectively is a spot you won’t want to separate.

And if one piece is dependent upon one other one, you’d have a tougher time coping with it or having useEffects utilizing the values as dependencies or danger having outdated information exhibiting.

TIL: this works with nested information too!

The dependency array of hooks works with nested information [data.like.this] and never solely that… even if in case you have information which may not be there it really works!
So, you possibly can have the state in a single place and use [data?.optional?.chaining] as a substitute of splitting or placing all the object within the array with a if worth then do stuff.

TLDR: Break up if it is sensible for the information to be elsewhere, else, so long as it’s readable and maintainable… you would possibly need to contemplate sticking to at least one state.

Cowl Picture by Kelly Sikkema on Unsplash