Learn React Hooks

Problems with the State Hook

The State Hook already supports passing complex objects and arrays to it, and it can handle their state changes perfectly well. However, we are always going to have to change the state directly, which means that we need to use a lot of spread syntax, in order to make sure that we are not overwriting other parts of the state. For example, imagine that we have a state object like this:

const [ config, setConfig ] = useState({ filter: 'all', expandPosts: true })

Now, we want to change the filter:

setConfig({ filter: { byAuthor: 'Daniel Bugl', fromDate: '2019-04-29' } })

If we simply ran the preceding code, we would be removing the expandPosts part of our state! So, we need to do the following:

setConfig({ ...config, ...