Same as in my last post, I was using and referencing React's Legacy version and its documentation when writing this. If you've been using React's modern versions, things might look a bit different!
A Small Introduction
So you’ve played around with React.js a bit, and you’re wondering what the next step is… Why not give Hooks a try? Hooks are a way of using state or other React features without writing a class. They bring a little more of the “magic” of React into your code, and they aren’t all that difficult to learn.
What Hook do tho???
So what DOES a Hook do? Well, for one thing, they let you easily reuse stateful logic without having to change your component hierarchy, meaning less hassle with getting your components in the right order to use things where you want them. They also cut down on component complexity by splitting a complex function up into smaller parts, and lessen the struggle of trying to learn how to use a class by the fact that it allows you to use most of React’s features without them. They also work great even with preexisting code, and are backwards compatible, making it easier to transition to using Hooks if you so please.
Things to keep in mind...
Now, while Hooks are very useful, there are a few things to note about them. There are two rules to follow when using Hooks: only call them at the top level, instead of inside a nested function, loop, or conditional, and only call them from React functional components — they don’t work inside of class components (as they’re designed to let you use React without those), and you shouldn’t try using them inside of regular functions. You can, however, use them inside of your own custom Hooks. Hooks can effectively replace even lifecycle methods such as componentDidMount.
Example time!!!11!1!!
While telling you about Hooks is all good and well, I think it’d be best to show off some examples. Lets start with the State Hook, a built-in Hook that allows you to use State inside of functional components. We gain access to it simply by importing it, like this:
import React, { useState } from 'react';
Well, now that we have it, what do we do with it? useState is a function that takes in our initial value for our state, and returns a pair of values, being our new state and the function for updating it (in class components, this translates to this.state.value and this.setState). So let’s pretend we’re going to have a password for a website, and make a component with state based around that:
// gotta use functional components!
function Password() {
// since we get two outputs as an array, we can handle them like this!
const [password, setPassword] = useState('ilikespaghetti123');
}
Now we have two variables, one which stores our password (ilikespaghetti123), and one which allows us to change the password whenever we want. To access these values, you'd usually have to reference this, which is a bit of a hassle. Instead of saying this.state.password, we can simply refer to password! But what if we actually DO want to change the password? It's as simple as calling our function with a new value:
setPassword('BananasRYellow24');
Ideally, we'd have this function bound to some kind of a button, take user input from props, or in the case of something like a counter, it could even interact with itself by passing in something like count++. And yes, we can even declare multiple state variables in the same component, as well as update them individually!
Additionally, you can use something called Effects to replace lifecycle methods, or even create your own Hooks to do... whatever you want, basically. Unfortunately, I don't have a good example of what you can do with the former that wouldn't just be copy-pasted from the React documentation, but you'd use it when you need to update something every render, such as a counter or the color of something or an info card; and I didn't understand the latter well enough to write about it, so I'll be moving on, but it's definitely worth checking out for yourself!
Are you Hooked yet?
While this wasn't a SUPER fleshed out blog, it covers my current understanding of Hooks, with some very basic examples of what one might do with them. I think Hooks are very interesting, and I'm excited to keep exploring them, especially considering the headaches class components have given me in the past. I hope you found this article at least semi-helpful, and as always, you should check out the official docs when you get the chance!
Top comments (0)