DEV Community

loading...

๐Ÿš€Easy peasy, three steps to manage your state in React.

Shiva shankar
front end dev
ใƒป1 min read

Happy to see you guys in another blog ๐Ÿ˜‡.

In this blog, we see how to manage our state with ContextAPI, which is easy and more powerful in React. Without drilling props to props... context API makes our lives easier๐ŸคŸ.

create Context

Alt Text

Here I've created the useContext and pass it to the value of my name. This name value we can get anywhere on the folder by importing the useContext Hook.

Wrapup the parent component

Alt Text

Make sure to import your NameProvider and wrap up the parent component, it gives the access to pass the value inside all the children.

use Context

Alt Text
First import the useContext hooks and then the last step, import the NameContext which holding our state in this app. In my app, I want to get the value of a name in my header file.

Really this is easy๐Ÿ˜Ž and cool, I just gave a ๐Ÿง‘โ€๐Ÿ’ปdemo by using a single file, if your app goes longer and longer, you can create the multiple create context and import where you want.

Discussion (0)