How to destructure the fundamentals of React Hooks

That’s simply the initial value we’re setting the state instance to.

In this case, we’ll sadly start off with 0 cookies.

Actually, use stateOnce we have our destructured cookies and the setCookiesCount function, we can start interacting with the component's local state like you might do using setState within a class component.

At render time, our cookies value will be that invocation of useState's internal state value, similar to what you might see with this.

state.

To update that value, we can simply call setCookiesCount.

const MyCookies = () => { const [ cookies, setCookieCount ] = useState(0); return ( <> <h2>Cookies: { cookies }</h2> <button onClick={() => setCookieCount(cookies + 1)} > Add Cookie </button> </> );};If you’re more used to the class syntax, you might update state using this.

setState looking something like this:class MyCookies extends React.

Component { constructor() { super(); this.

state = { cookies: 0 } } render() { return ( <> <h2>Cookies: { this.

state.

cookies }</h2> <button onClick={() => this.

setState({cookies: this.

state.

cookies + 1})}> Add cookie </button> </> ) }}How to use effectsOften components need a way to create side effects that won’t necessarily interrupt the functional flow of a function component.

Say we have the number of cookies we have saved on a server somewhere, we might want to fetch that count when the app loads.

const MyCookies = () => { const [ cookies, setCookieCount ] = useState(0); useEffect(() => { getCookieCount().

then((count) => { setCookieCount(count); }) }); .

};After the component renders, everything inside of useEffect will run.

Any side effects originating from useEffect will only occur after the render is complete.

That said, once useEffect does run, we fire getCookieCount and use our previous setCookieCount function to update the state of the component.

Hold up, there’s something wrong…There’s a gotcha in the code above though.

That effect will run every time, essentially wiping out any new increments to our cookie value from our original Add Cookie button.

To get around this, we can set a 2nd argument to the useEffect function that allows us to let React know when to run it again.

In our example above, setting that 2nd argument to an empty array will make it run only once.

const MyCookies = () => { const [ cookies, setCookieCount ] = useState(0); useEffect(() => { getCookieCount().

then((count) => { setCookieCount(count); }) }, []); .

};In most cases though, you’ll want to pass an array of dependencies that, when changed, will cause useEffect to fire again.

Say, for example, you're fetching the count of a specific cookie type and want to get the count again if that type changes.

const MyCookies = ({cookieType = 'chocolate'}) => { const [ cookies, setCookieCount ] = useState(0); useEffect(() => { getCookieCount().

then((count) => { setCookieCount(count); }) }, [ cookieType ]); .

};In the above code, any time our prop cookieType changes, React knows that we depend on it for our effect, and will rerun that effect.

Trying to make use of contextI’m not going to go into the details of React’s context API as that’s a little out of scope.

However, if you’re familiar with it, the useContext hook lets you easily make use of your context from within your function component.

import BasketContext from 'context';const Basket = ({children}) => { return ( <BasketContext.

Provider value={basketItems}> <h1>My Basket</h1> { children } </BasketContext.

Provider> );}// MyCookies.

jsconst MyCookies = ({cookieType = 'chocolate'}) => { const basketItems = useContext(BasketContext); .

};In the above code, given our already created context, we can immediately “use” said context and collect the values passed into our context provider.

Cleaning your hooksWhat makes hooks even more powerful is combining and abstracting them DRYing up your code in a cleaner way.

As a quick last example, we can take our cookie examples of useState and useEffect and abstract them into their own use[Name] function, effectively creating a custom hook.

// useCookies.

jsfunction useCookies(initialCookieCount) { const [ cookies, setCookieCount ] = useState(initialCookieCount); useEffect(() => { getCookieCount().

then((count) => { setCookieCount(count); }) }, []); function addCookie() { setCookieCount(cookies + 1); console.

log('????'); } function removeCookie() { setCookieCount(cookies – 1); console.

log('????'); } return { cookies, addCookie, removeCookie }};// MyCookies.

jsconst MyCookies = () => { const { cookies, addCookie, removeCookie } = useCookies(0); .

};We were safely able to abstract our state logic and still utilize it to manage our cookies.

Plenty more to get hooked onThese are the basic 3 hooks React gives us, but there are many more they provide out of the box, all with the same underlying principles that the React documentation does a good job at explaining.

Originally published at https://www.

colbyfayock.

com on April 17, 2019.

.

. More details

Leave a Reply