How To Use (More) React Hooks

A while ago, I wrote about using the basic React hooks, useState and useEffect. Since then, I’ve been working completely with functional components in React and have been able to explore the other hooks React offers.

useContext

useContext is similar to useState except its meant for global values that need to be used by many components. If you’re familiar with Redux, it’s similar to the Redux store. As a matter of fact, context is provided to components by wrapping them in a Provider, just like Redux.

To establish context, import createContext from React and execute the function:

import React, { createContext } from 'reactconst SampleContext = createContext()

The value that’s returned contains the Provider:

<SampleContext.Provider value={'sample'}>
{children}
</SampleContext.Provider>

Now, any child of this Provider can access the value in SampleContext using useContext:

const sample = useContext(SampleContext)

This is useful if you have a value that needs to be accessed site-wide, like a user object. In fact, you can combine useContext with useState and useEffect to handle everything to do with getting user info and establishing a user login in one Provider component like this:

const UserContext = createContext()const UserContextProvider = ({ children }) => {
const [user, setUser] = useState(null)
const userId = localStorage.getItem('userId')

useEffect(() => {
if(userId) {
getUser(userId)
.then(resp => resp.json())
.then(userData => storeUser(userData))
}, []}
const storeUser = userData => {
setUser(userData)
localStorage.setItem('userId', userData.id)
}
return (
<UserContext.Provider value={{ user, storeUser }})>
{children}
</UserContext.Provider>
}

Now, all components within this UserContextProvider will have access to the user object and the storeUser function by using the context hook:

const { user, storeUser } = useContext(UserContext)

useRef

I think useRef is my favorite hook because it gives you access to the kinds of things that make JavaScript fun. A ref is a reference to the DOM node represented by the JSX component in your code. This allows you to use vanilla JavaScript methods like .focus() or .click().

It’s a little trickier to set up than some of the other hooks, mainly because the DOM has to load before the ref has value. First, you need to declare the ref:

const buttonRef = useRef(null)

Then, you have to point your JSX component to the ref:

<button ref={buttonRef}>Click Me</button>

After the DOM is loaded, the <button> node can be accessed by your JavaScript through buttonRef.current. The fact that the ref is only available after the DOM has loaded is important because buttonRef will initially be null. As a result, make sure to check that a ref has value before trying to use ref.current.

--

--

--

github.com/mpottebaum

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Understanding Redux with Simple Analogy

Takeaways from ReactJS Girls Conference

How to Create a Simple Chrome Extension

Crome Extention Architectre

How to make AJAX requests with Axios

How to get your Google Sheet Data into Zapier and to the REST of the Internet!

Understanding Chai.js Language Mechanics

Introducing Spaces: App-Specific, Private Data Storage

What is JavaScript and how does it work? Let’s clear the concept.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mike Pottebaum

Mike Pottebaum

github.com/mpottebaum

More from Medium

React Components

React Comments and @ Mentions

What is React?

React. What about without redux, context ?