Read your code more easily with React Hooks and the useCallback Hook.

I had the opportunity this week to meet with my long time friend who encouraged me to get into coding. We talked shop for a bit, which led into a discussion about React, React Hooks, how important hooks are, and how I sadly knew little about them. By the end of our conversation, we had refactored a bunch of code in one of my projects to implement hooks and my first impressions were this:

• React Hooks can make your code way more easy to read.
• Dependencies in the useCallback hook are a lot like event listeners in Javascript.

Let’s put on our thinking caps and figure out the how and why for my reasoning.

Who doesn’t want code that’s easier to read? It’s something we all strive for while creating projects and doing our daily work. In React, the overuse of class components and setState can really clutter up a component or function. Take a look at some of my app’s login code:

Here we have a class component named LoginForm which is stateful. When the value of our name for username and password change, state for those two things will be reset to where e.target.name = e.target.value. This happens whenever handleChange is invoked.

This is pretty basic React stuff, but it would be nice if I could explain how things are interacting with each other more easily. Enter Hooks and the useCallback hook.

• *Note** If you are planning on using React Hooks, you might need to restructure how your components are built. In my previous example, you can see that I used a class component, but hooks do not play well with classes. This leads us to needing to reconstruct our component to be a function component.

Now lets take a look at our new login form. Lines 7–9 are creating variables with state via the useState() hook. Here, whatever you put inside the parenthesis will be how state of that item is initialized.

But these are just variables, so where is state actually being set? That question is answered in the second argument of our variables. In each const on lines 7–9 we are including two things that useState will use:

• The name of what we are giving state to and it’s current value( ex: username with a value of “ ”)
• The function that allows us to update state (ex: setUsername)

To me, this is way easier to read because instead of searching for the proper this.____ or the right setState, we can easily see what our stateful pieces are and how their state is updated. Oh! That reminds me. Remember when we mentioned that Hooks only work in function components? That means that we no longer need to rely on this.____ in our component. This is due to this referring to the class/scope that’s currently being built on.

Other than the useState hook mentioned above, you can see one more hook in that bit of code that I mentioned earlier. However, for a better explanation of how useCallback will work, I’d like you to take a look at a common fetch request.

Right at the top on line 40 we can see our useCallback being given the logUser (logged in user’s) data which leads to a Fetch/Post request in the backend. I don’t need to explain what’s happening in the center of this code, because all of the useCallback functionality lies in the beginning and the end of this chunk of code.

useCallback takes in two arguments:

• A function
• An array of values that the function depends on.

So our function in this code chunk gets fired when a user submits our login form. It will only fire again when there is a change to the three values we placed as our second argument [username, password, handleResponse]. That means if a new user logs in, it will trigger a change in the information that’s stored in username, password, and handleResponse. Because of this, our handleLoginSubmit will fire off again and our new user will be posted to the backend.

In essence, that second array of values that useCallback is given is a lot like an eventListener in Javascript. The only difference is that an eventListener will always listen for something like a click or mouseover, whereas our useCallback is listening for changes to whatever you put inside that second argument.

This also adds to the legibility/ease of understanding of our code because we are constantly tracking changes the user makes in predictable places. With the useCallback hook, all you need to do is check out that second argument to know what is triggering that piece of code. I could only imagine how much easier this makes working in a more complex project.

I’ve got my work cut out for me in restructuring this project to use React Hooks, but I’m up for the challenge! Special thanks to my friend Alex Glover for spreading some knowledge and shining some light on how to work better in React. Alex, to my knowledge, doesn’t have a medium page. However, you can check out his band instead if you want some good tunes written by good people!