React is a library for creating front end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

In this article, we’ll look at how to use React hooks to make function components smarter.

Introducing Hooks

Hooks are introduced with React 16.8.

We can use hooks to make function components keep and change dynamic states.

For example, we can write the following code to add a hook to our app:

import React from "react";  
import ReactDOM from "react-dom";
function App() {  
  const [count, setCount] = React.useState(0); 
  return (  
    <div>  
      <button onClick={() => setCount(count + 1)}>Count {count}</button>  
    </div>  
  );  
}

In the code above, we have the React.useState hook with the default 0 passed in. It returns an array with the state, which we called count , and a function to set the state, which is called setCount .

Then in the onClick handler of the button, we can the setCount function to update the count.

Other packages like React DOM also has to be updated to 16.8 or later.

React Native since 0.59 also supports hooks.

No Breaking Changes

Hooks are completely opt-in. They coexist with class components. Therefore, we don’t have to change any existing code. They’re also completely interoperable with class components.

Class components will be available in the future. They also don’t replace our knowledge of existing React concepts.

Why do we need Hooks

We can use gooks to reuse stateful logic without creating higher-order components or doing other things to change our component hierarchy.

Complex Components Become Hard to Understand

Complex components have many methods which are lifecycle hooks and also our own user-defined functions.

They all have a mix of unrelated logic. This makes it too easy to introduce bugs and inconsistencies.

It’s impossible to break them into smaller components because stateful logic is everywhere. It’s also hard to test them because of the complexity.

We can use hooks to split one component into smaller functions based on what’s related.

Classes are Confusing

We have to understand a lot about how JavaScript classes work, which is different from most languages since JavaScript classes are just syntactic sugar on top of its own prototypical inheritance model.

Also, we have to make sure the value of this is correct so we don’t introduce errors.

Classes can introduce patterns that make optimizations difficult. They don’t minify well and they make hot reloading flaky and unreliable.

Hooks are used without classes, so we don’t have to worry about any of these issues.

Gradual Adoption Strategy

We can create new components with hooks without affecting anything existing code.

Therefore, we can try them on non-critical parts of an app first.

Class components will be supported in the foreseeable future.

Conclusion

Hooks are the new way to keep dynamic states in function components.

We can use function components with hooks the same way that we write class components.

They coexist with existing class components and they’ll still be supported in the foreseeable future.

Hooks remove the confusion that arises from JavaScript classes and also let React minify the code by providing additional optimizations that can’t be done with classes.