DEV Community

loading...
Cover image for Basic Hooks in React - useContext()

Basic Hooks in React - useContext()

olenadrugalya profile image Olena Drugalya ・2 min read

This blog post continues the series about React Hooks.

Here we are exploring one of basic and important hooks in React - useContext().

What is useContext()?

useContext() is JavaScript function, which lets you read the context and subscribe to its changes in functional component.

If you are not familiar with React Context object, I suggest you to read about Context API first before you proceed further with the article.

How and when use useContext()

To use this hook, you need to import it first from React library like this:

import {useContext} from 'react';
Enter fullscreen mode Exit fullscreen mode

You can use this hook without import as well like this - React.useContext(), for me it's just more convenient to import and destructure first this function and then use it when need in the code.

Than we call useContext() function, which accepts context object as argument and returns current context value:

const contextValue = useContext(MyContext);
Enter fullscreen mode Exit fullscreen mode

The context object should be created above the useContext() hook before the hook is called (or imported from another file).

We use useContext() in functional component the same way as we would use Context API, except that the hook works with a MyContext.Provider and MyContext.Consumer component in one call.

Let's consider we are building app where we have a button and by clicking on it the status of authentication is changed from Yes to No.

First we need to create Context:

// Creating the context object and passing the default values. 

export const authContext = React.createContext({status:null,login:()=>{}}); 
Enter fullscreen mode Exit fullscreen mode

Now we import Context to our file and use it's values anywhere we find it necessary:

import {AuthContext} from './authContext';
import {useContext} from 'react';

export const Auth = () =>{

const auth = useContext(AuthContext); 

return ( 
    <> 
      <h1>Are you authenticated?</h1> 
      {auth.status ?  <p>Yes you are</p> :  <p>No you are not</p> 
} 
      <button onClick={auth.login}>Click To Login</button> 
    </> 
  ); 
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

The React hook useContext() provides you with a functionality to avoid props drilling in the components tree and use Context object in functional component in one call.

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Buy Me a Coffee at ko-fi.com

Discussion (3)

pic
Editor guide
Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
olenadrugalya profile image
Olena Drugalya Author

I don’t quite understood what do you mean by Void? I could think only if Void from C#