Nest React Hooks

React can be used with two different types of components, Classic (with state) and Functional (stateless). In the functional component you can add a state to it using Hooks. Make sure to import useState to it. So creating a hook would look like this:

Now say you wanted to add an object to it and want to pass both objects to the next component using one hook only. You can create 2 hooks and nest one inside the other.

Now let’s add another object to this first hook. We can add a new hook in it without altering the previous one like this:

Then if you wanted to create an update on the first subData without using destructive methods, you can do the following:

You can use this when you are fetching from an API and have tons of data to work with, but want to be able to manipulate in sections. This certainly helped clean and refactor code I had on a project. Let me know what you think!