Hook, Line, and Sinker: Hooks in React.js
Tags: react, hooks, components, javascript
Published: 2020-07-12 20:15:38

## Introduction
React is a JavaScript library for building user interfaces, and is a tool used primarily for building the view layer of an application. In React, are made up of components using code to produce HTML. Respecting the separation of concerns, each component is responsible for a separate function or task.

React was created by a software engineer at Facebook named Jordan Walke, which was later incorporated into the Facebook newsfeed in 2011, used in Instagram in 2012, made open source at JSConf in 2013, and adopted by Netflix in 2015. In 2017, they fully rewrote React's internals to modernize it, and in 2019, Hooks were released, a means of sharing stateful logic between components.

Static components are React components that are not updated constantly. Stateful components are dynamic (like a counter for example) and re-render constantly.

When props or states change in React, the component tree re-renders, updating the user interface with the latest data. Typically ` useState` is used for this rendering and re-rendering process.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/19s7srvtqudblgbmp0ww.png)

## Hooks - Introducing useState
For values that will change, you'll want to store said values using React state, using React hooks. Hooks allow us to link, or hook up, functionality across components. Importing React's `useState` hook can be done like so:
```jsx
import React, { useState } from "react";
```
An example of a value that might change would be a numeric tally of the number of reviews a product has received.
```jsx
function ReviewsCount() {
  const [reviewsCount, setReviewsCount] = useState(0);

function anotherReviewAdded() {
  setReviewsCount(lastState => lastState ++);
}

  return (
    <div>
      {reviewsCount} Reviews
      <br />
      <button onClick={anotherReviewAdded}>
        Submit Review
      </button>
    </div>
  );
}

ReactDOM.render(
  <reviewsCount />,
  document.getElementById('reviewsCount')
);
```

## Hooks - Introducing useEffect
`useEffect` is an important addition to your repertoire if you aim to cause side effects, e.g do something that isn't part of the return. Say we wanted to send a message to the console.log to see if a boolean was checked.

```jsx
function ConsoleBoolean() {
  const [clicked, setTrue] = useState(false);

  useEffect(() => {
    console.log(`Boolean True!`);
  });

  return (
    <>
      <input
        type="checkbox"
        value={clicked}
        onChange={() => setTrue((clicked) => !clicked)}
      />
      {clicked ? 'clicked' : 'not clicked'}
    </>
  );
}

```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l0cwwjhy89y3n7spl77e.jpg)

## Hooks - Introducing useContext
`useContext` returns a context value for the context specified. When the `<MyContext.Provider>` updates, the useContext hook triggers a rerender passing the latest context value. The argument `useContext` receives is the context object itself.

Context using the standard way:
```jsx
import React from "react";

const ColorContext = React.createContext();

function App() {
  return (
    <ColorContext.Provider color={blue}>
      <div>
        <Display />
      </div>
    </ColorContext.Provider>
  );
}

function Interface() {
  return (
    <ColorContext.Consumer>
      {value => <div>The color is {color}.</div>}
    </ColorContext.Consumer>
  );
}
```
Context using the new useContext hook:
```jsx
import React, { useContext } from 'react';

function Interface() {
  const color = useContext(NumberContext);
  return <div>The color is {color}.</div>;
}

```

## Conclusion
React.js is one of the most widely used libraries in JavaScript today, providing a powerful means of constructing the view layer of applications. We can use hooks to have the various components in React talk to each other, and cause changes and perform functions upon changes to the state and upon user interaction.  `useState` allows you to add state to your components, storing values that will probably change. `useEffect` is important to use when we need a render to cause side effects outside of just the return of the function. `useContext` can be used to rerender when its value changes. These hooks allow you to use state and other features without writing a class.