Intro to Basic React Hooks
Released in 2013, the React JS frontend framework has become the most popular way to create modular reusable components for web applications. Supported by Facebook and a large open source community, it is often the first framework many aspiring web developers learn.
React, like most other frameworks abstracts a lot of processes allowing for much faster development times. What may have taken days in the venerable JQuery can be done in a fraction of the time with React.
One drawback to React was the need for writing verbose JS classes in order to use and maintain state. The much simpler and cleaner functional components relied on state being passed in from a class based component, limiting their efficacy.
With the introduction of React hooks in the React 16.8 version released in Feb 2019, and the since continued evolution of hooks, all that has changed. In a nutshell, hooks allow you to “hook” into the state management and component life-cycle features of react.
```const myHook = () => {
const[stateVariable, setStateVariable] useState(Default_State)
return (
{
e.preventDefault();
setStateVariable(42)}}>Set State! )
}```
Above is an example of using hooks for state management. Notice how short the code is compared to a class pattern? The useState hook is very simple. Declare the variable, in this case, stateVariable, and the function to set or change that state value inside the []. Lastly, you hook into state with useState(). The parameter of use state can be any thing you need that state to hold, primitive values or an object value. You can even pass in a prop.
These state hooks can be passed down and up however you need to. You can pass the variable itself, the function to change it or both.
The benefit here beyond just avoiding all the extra verbiage of a class is you also no longer need to worry about ‘this’ or binding functions! Hooks allow all the same functionality of state without all the mess that class instantantiation involves, resulting in easier and faster to write, easier to read, and ultimately slimmer JS code.
The next common hook use is lifecycle hooks. The first you will likely want to implement is useEffect(). useEffect() mimics the functionality of componentDidMount().
const myComponent = () => {
const [userData, setUserData] = useState();
useEffect(() => {// fetch data from an api,
setUserData(res.body);
}
}
Here we have a simple example of useEffect(). Once the component is loaded into the DOM, useEffect executes the function in its parameters. In this case, an API is called, and upon receiving a response, updates state to contain the userData, triggering a render just as if you had used the old setState class pattern.
If you are familiar with react classes, picking up these basic hooks is elementary, and if you are anything like me, once you use them, you will likely never write another class based component again.
Subsequent releases of React have embraced the hooks movement, modifying and adding more functionality, future releases promise more of the same.
I hope this article helped attain a basic understanding of moving into hooks.
As always, Happy Hacking!