Essential React Hooks 🪝

What are Hooks?

Here you can dive in with React Hooks: The magic that we infuse into functional components to give them superpowers.

In React, we write all of our Javascript or Typescript components as pure functions that are defined as constants, take a single argument of props, and

import React from 'react'; 
const MyComponent = (props) => {
    <>Hello World</>

Remember, this “stateless” functional component is a pure function. For this reason, it has no baggage of the ‘this’ keyword. Its scope is defined every time it is run and then thrown away as soon as the return happens.

So then how is a component supposed to — for example — do anything?

That’s where hooks come into play.

A hook lets you make a hook— kind of like making a phone call and writing down a piece of information— before your return statement in your component.

These hooks themselves are passed special arguments and return special things— like objects or functions. Sometimes you pass a hook a function that itself returns a function.
Either way, what you are doing is hooking into your React component (which is a pure function, so can’t naturally have any name-spaced variables that persist from call-to-call).

The hooks allow you to persist stuff between when your pure stateless function gets called by React (which you have little control over, because React will call your functional component whenever it wants to).

This concept of giving up control over when your functional component gets called is key to working with hooks. By giving the control over to the hooks, we let React think about things like attaching meaning, side-effects, and behaviors to what we now think of as “pure” UI elements.

That’s an important concept and really the heart of working with modern React today.

The Core React Hooks