React Context and Hooks

FOLAKE SOWONOYE
2 min readAug 6, 2022

--

Here is why I’m writing, while working on a react project I ran into a problem while trying to share data within components, you must have said why didn’t I pass props🤔 yea I did, but I felt there must be a better and cleaner way of sharing the data .

So I messaged a friend and he sent me a link to a youtube🎥 react course guess what ? Sit back and understand React Hooks.

Context API

It an easy way to share state within your component tree see it as👉 “All components in your react project have access to your data” so I don’t need to keep passing props all around. Literally gives you a clean code.

photo credit: net ninja
photo credit: net ninja

Here its is, I have data in App.js, but I need this data in PageView, Navbar, BookList, StatusBar, BookDetails and AddBook. How do I get the data in all components. with React Context you can do this.

Hooks

React Hooks allows you to use (useState, useEffect and other react features ) within you fuctional component. N.T “I said functional components”

useState — allows you to use state with a component that is handle changes when component updates. e.g switch a like button

useEffect — allows you to handle side effects in react and runs code when component re-renders e.g API calls

useContext — allows you to consume context in a functional component e.g sharing data with components.

I don't want to bore with talks, get your hands dirty with react by watching the youtube video pinned on twitter page (@SowonoyeO) .

--

--