Pirates Aren’t the Only Ones With Hooks…
React is one of the fastest-growing development tools in the world today. Since 2013, it has given developers a powerful Javascript library to design user interfaces. Though based on Javascript, React has it own particular syntax and conventions that must be learned outside the “vanilla”.
Anybody who has any experience working with React can tell you that state is a powerful, albeit, sometimes frustrating tool. As React continues to evolve, different approaches on how to handle state have emerged. One of the more recent additions to this “state mutation” is the React hook.
Class Components
The Class Component is where state usually lives…
With the introduction of React hooks, state can be declared and used in functional components. State seems to be working perfectly fine in class so why would we want to change a good thing?
Benefits of Using State Elsewhere
Class components are awesome but using them to handle state can be cumbersome. For one, it can be difficult to follow a class component’s code. With state being initialized and passed down from parent to children, state effects the actual component hierarchy. It can get incredibly frustrating being limited by this. As someone new to React, class components can be a large hurdle. Learning when and how to use them evidently still causes arguments with experienced React developers to this day. React’s developers over at Facebook recognized the common problems popping up with class components and came up with the HOOK.
React Hooks
React Hooks remove a lot of the pitfalls involved with using class components.
- They allow us to use state without changing the component hierarchy. This can mean more freedom to structure your app and share state between components easily.
- Hooks allow code to be written in a more familiar way. For JS developers, the move to React can be fraught with new syntax and convention. Being able to handle state in a functional component is simply more familiar than learning the class component.
- They make state reusable anywhere in your code. Having components rely on each other for state mutation can cause the DOM tree to become a huge mess.
Basic Hook Usage
A hook is a function that lets you “hook into” React features. This is a powerful tool for a React developer. How many times have you realized after writing a functional component that you needed to convert it to a class component to handle some type of state? Instead of rewriting the component, now we can use hooks.
useState is the way functional components declare and reuse state. It operates the same way this.state does in a class component. By declaring them here we can preserve the state variable!
(Make sure to import React, { useState } from ‘react’ at the top of your file!)
Here a count variable is being set (count) followed by a function to update it (setCount). This operates like a class component declaration of this.state.count and this.setState. The initial state of count (0) is an argument of useState.
As you can see, [count, setCount] are declared in square brackets. This is array destructuring.
“When we declare a state variable with useState, it returns a pair — an array with two items. The first item is the current value, and the second is a function that lets us update it.” https://reactjs.org/docs/hooks-state.html
When we invoke the function setCount now
Look how clean that is! setCount is called and the variable count can be incremented by 3 on every button click!
Using Hooks to Fetch
If you are familiar with class components you have probably used them to fetch data. Its a logical place to do so since class components hold state and have access to the componentDidMount() function (a perfect place to fetch). Can we use hooks to accomplish the same thing?
Absolutely!
Above, we have imported the useState from React and setup a basic fetch. Above the fetch function we have set the state hook. useState() is declaring an initial state of an empty object (just like you would with state ={} constructor). The first item in the destructured array is declaring a variable responseObject. The second is declaring a function called setResponseObj. The fetch gets our data, converts the response to JSON, and then sets the response as the argument of the setResponseObject() function. This function then takes the initial state value of responseObj( which is {}) and sets it to the response (fetched data). Now responseObject can be called in the return and we can access any data values. The code is clean, clear and easy to follow.
Playin’ Hooky
React developers have been changing the way state is handled in our apps. These changes come from an understanding of the limitations and problems faced when state only being handled in one type of component. While class component aren’t likely to be phased out entirely from React, there is a definite shift toward the use of functional components as a way to keep state clear, clean, and reusable.
