Hooks

Due to some exciting news, I've been diving into the front-end, more specifically React. So here's a brief article on hooks and their origin.

A Few React Terms

For those less familiar with React here are some quick terms I'll be referencing:

1. Component: a JS class or function that renders some UI component
2. State: an object that represents data that can change in an app
3. Props: data that is passed from one component to another (props do not change unlike state)
4. Lifecycle Method: methods that can be defined to control what happens when events occur regarding components (rendering, updating, mounting, and unmounting)

Class VS Function

React allows us to have two different types of components: functional and class. For a few years functional components were not capable of having state and could only receive and render props passed to them. If a developer had a functional component that suddenly needed state that developer would have to convert their functional component to a class component. Often developers would default to class components to avoid the need to convert their components. This all changed in the fall of 2018.

The Problem(s)

Passing Props

Passing props between components is a key part of React. Unfortunately when apps grow to a large size and data must be passed to a "low-level" component props must be passed to many components in between the parent component and the child component that needs the prop. These other child components don't need the data, but must act as messengers.

Lifecycle Methods

Another essential part of React is the power of lifecycle methods. Lifecycle methods let developers take control of what a component should do and when. We set state in our constructor, if we need to fetch data we have componentDidMount, if a component should only update when the counter increments we have shouldComponentUpdate, when we need to clean up processes/remove event listeners we can turn to componentWillUnmount. The problem is in the real world these methods can get messy, and unrelated logic can pile up in one place while related logic is separated into different methods.

Efficieny

Not only were class components giving developers a hard time, but computers also have a harder time working with classes as opposed to functions. With all these problems the React team decided to blaze a trail and in 2018 at React Conf Sophie Alpert, Dan Abramov, and Ryan Florence revealed hooks. React Today and Tomorrow and 90% Cleaner React With Hooks.

A New Way

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
-React Docs

With hooks developers had a new way to work, functionally. Hooks give us the power to access state, the component lifecycle, and more without classes. And what makes hooks even more cool is their ability to be shared and utilized. They are functions designed with reusability in mind. I've just scrathed the surface with them, but I can tell you that they really make sense to me. Next week I'll go over some common hooks such as useState, useEffect, and useContext. Stay tuned!