Gain insights into using React Hooks to enhance code composition and reuse. Delve into custom hooks, global state management, unit testing, and the useDependency Pattern for enterprise-level coding.

prettyeslint.tar.gz

Jest

Jest only

Jest only-copy

Jest-copy

In this course, you will learn how to use React Hooks, which will help you achieve better code composition, code reuse, and unit testing ability as opposed to using class components.

You’ll start by reviewing what React Hooks are all about and why we need them. This will set the stage for the rest of the course. After that you will dive into the Hooks API, how to manage application state globally, as well as how to create custom hooks.

In the second half, you’ll get into unit testing and how to work with the popular useDependency Pattern. By the end of this course, you’ll have the confidence to write enterprise-level React Hooks code.

A Deep Dive into React Hooks

# What is it?

`useContext` provides the current context value of the context object passed to it. The `useContext` hook relies on nearest Context Provider to determine the current value for that context.

Firstly, take a look at an example implementation using class and later convert it to use the `useContext` hook.

Assume you have an application with different theme colors depending upon the brand definition.

```javascript
import React, { Component, createContext } from 'react';
const ThemeContext = createContext('green');

const App = () => {
  return (
    <ThemeContext.Provider value={'green'}>
      <Content />
    </ThemeContext.Provider>
  );
};

class Content extends Component {
  static contextType = ThemeContext;

  render() {
    return <Button theme={this.context} />;
  }
}

export default App;

```

First, create a context object `ThemeContext` using `createContext` method from React library. `ThemeContext` has the default theme value as green. 

Later, wrap the app with `ThemeContext.Provider` as well as specify the theme value. After this, other components can access the value of the theme by using `ThemeContext`. In this example, a theme prop on a `Button` component is provided. The value of this theme is taken directly from React Context. 


Look at how you can convert the same example to use the `useContext` hook. 

The `ThemeContext` creation and `App` is exactly the same as the code snippet below. The difference is in the `Content` component. Instead of using a static variable in the class, simply call `useContext` to return the current value of `ThemeContext`.

```javascript
import React, { createContext, useContext } from 'react';
const ThemeContext = createContext('green');

const App = () => {
  return (
    <ThemeContext.Provider value={'green'}>
      <Content />
    </ThemeContext.Provider>
  );
};

const Content = () => {
  const theme = useContext(ThemeContext);
  return <Button theme={theme} />;
};
```


# When do we use it?

Wherever a React Context API is being used, the `useContext` hook is used to retrieve the value of a given context.


# Syntax

`useContext` accepts a React Context object as the only input. 

The output of `useContext` is the current value of the provided context.


```
const value = useContext(MyThemeContext);
```

As mentioned earlier, this value is determined by the nearest Context Provider. If the value of Provider changes, `useContext` hook will trigger a re-render in the calling component.

> **NOTE**
>
> If a parent component uses memoization to skip renders, the `useContext` hook will still cause a re-render in a component where it was called in case context value changes.



Learn the "useContext" hook by building a basic application with it.

Introduction

Getting Started with React Hooks

React Hooks API

Advanced: Deep Dive into useEffect Hook

Managing Global State with Hooks

Create Your Own Hooks

Unit Testing for React Hooks

Advanced: useDependency Pattern with Hooks

Conclusion

useContext Hook

What is it?