What Exactly is a React Hook

React has been around for just under 10 years now. It has come a long way in that time but I want to talk about a major update to react a bit under 2 years ago, and that is hooks.

There are two types of components in React — functional, and class. Before hooks, functional components needed to be very simple because they did not have access to React’s state and lifestyle features. To use these features you needed to make your component into a class. The problem with that is simply that classes can be confusing and aren’t always optimal. Things like bind and this can be hard for people to understand especially with little experience in javascript.

Functional components are often easier to read, and now with hooks can have the same functionality that class components have. Hooks allow you to “hook into” the state and lifestyle features of React inside a functional component. No need to write a class.

The most common hook is the useState hook. State is very important in React and before hooks you needed to write a class to use it. Now you can simply use the useState hook inside of a functional component and accomplish the same thing. The hook is nice because it makes it easier to organize your state and lifestyle features. In the example with the useState hook, instead of calling state.<value> to access a value stored in state everytime you need, you can instead call a variable determined by you to represent each value in state. The same is true when changing a state. This tends to make your code a bit more readable and easy to work with.

Writing custom hooks can be a bit trickier but can also lead to even more functionality than you get inside of a class component. Hooks are powerful and every React developer should be able to use them effectively.

Student at Flatiron School