Course overview

How to work with course materials

Introduction

Setting up Developer Environment

Setting up Initial Project

How to Use ESLint and Prettier Together in a React Project

How to Configure React to Use TypeScript

How to Add Jest to a React Project for Automated Testing

Setting up developer environment

Building React Hooks: API Considerations and Best Practices

How to Implement a Custom useBoolean React Hook

Testing a Custom useBoolean Hook With React Testing Library

How to Implement a Custom useMap Hook With Tests

How to Quickly Import Custom React Hooks With an Index File

Implement an Object Returning API With a react-hanger Clone

Development of custom hooks

CommonJS vs ES6: An Intro to JavaScript Module Systems

What is Transpilation? An Intro to Transpilers vs Compilers

An Intro to Transpilers: ESBuild, Babel, and SWC Compared

What are Babel Transforms and Plugins?

A Beginner's Guide to JavaScript Bundlers

How to Simplify Bundling React Code With Microbundle

How to Add TypeScript Build Steps to React

How to Implement Babel Build Steps in a React App

Conclusion

Preparing code for publishing

Add Continuous Integration to a React Build With GitHub Actions

How to Automatically Generate a React App Changelog

How to Publish a React Library to NPM With GitHub Actions

Publishing the Code

In this course we’ll build a set of custom reusable hooks, a mini react-hanger clone, essentially going from nothing to a fully-automated publishing pipeline that follows the best practices.  We will cover common Hooks APIs every React developer should know, then dive straight into implementing Custom React Hooks, similar to what you will find in leading React libraries in the open source React ecosystem.

## Why this course
React Hooks promise to eliminate the difficulties of sharing state without writing class-based components. The challenge is that Hooks do away with the lifecycle methods and class-based semantics of state management that many React developers were familiar with.  Learning React Hooks on your own can be time consuming, confusing and frustrating.  With that in mind, The newline Guide to Creating a React Hooks Library, was created to provide a complete tutorial that fully covers React Hooks.  Within a few hours you'll have a strong grasp on React Hooks and how to implement them.

## Course Topics
This course packs practical hands-on-instruction using and building React Hooks, along with the best practices you need to build wider React Hooks libraries others across your organization can use.
The first module provides an overview of the React Hooks library project we’ll build, and we'll set up a complete environment with tools for library development.
The subsequent modules then take you through building with React Hooks and creating your React Hooks library, including:
- Hooks API fundamentals
- Developing custom React Hooks
- How to write reusable React Hooks
- Common React Hooks mistakes to avoid in your code
- Transpilers and bundlers for JavaScript libraries
- Using GitHub Actions to test, build, and lint your library
- Publish your React Hooks library to NPM

We’ll use tools including React, TypeScript, Babel, as well as GitHub Actions to build, test, and package a React Hooks library available for others to download from NPM.  Ultimately, build your own React Hooks library and learn the best practices that will make your code reusable. With these skills, you can contribute more confidently to any React codebase using React Hooks, and make your team more productive.

This course is a complete step-by-step guide to coding custom React Hooks and building a Hooks library from scratch.  Confidently master React Hooks, a transformative update added since React version 16.8, that makes it much easier to reuse code as your React codebase grows.

The newline Guide to Creating a React Hooks Library

Common React Hooks mistakes to avoid in your code

Transpilers and bundlers for JavaScript libraries

Using GitHub Actions to test, build, and lint your library

. Note that when this library is published, React will not be installed automatically but will require the library user to have a version of React no lower than 16.8.0 (which added support for React Hooks API).

Once we have React installed we can start to implement our first 

 is the hook that takes the initial state as a parameter, and returns an array with two elements. The first element is our current value, and the second is a list of possible actions: 

 type with the signature of the hook API we want to get. To keep our users happy, it's also good practice to create and export the type of 

import React, { useState, SetStateAction } from "react";

type UseBooleanFunction = (initial: boolean) => [boolean, UseBooleanActions];

export type UseBooleanActions = {
  setValue: React.Dispatch<SetStateAction<boolean>>;
  toggle: VoidFunction;
  setTrue: VoidFunction;
  setFalse: VoidFunction;
};

export type UseBoolean = [boolean, UseBooleanActions];

Let's implement the hook itself now, starting with naive implementation.

import React, { useState, SetStateAction } from "react";

type UseBooleanFunction = (initial: boolean) => [boolean, UseBooleanActions];

export type UseBooleanActions = {
  setValue: React.Dispatch<SetStateAction<boolean>>;
  toggle: VoidFunction;
  setTrue: VoidFunction;
  setFalse: VoidFunction;
};

export type UseBoolean = [boolean, UseBooleanActions];

export const useBoolean: UseBooleanFunction = (initial) => {
  const [value, setValue] = useState<boolean>(initial);
  const toggle = () => setValue((v) => !v);
  const setTrue = () => setValue(true);
  const setFalse = () => setValue(false);
  const actions = { setValue, toggle, setTrue, setFalse };
  return [value, actions];
};

export default useBoolean;

Open codesandbox.io and then click on the Create Sandbox button in the header. Search for React Typescript template and select it. After that copy-paste our code into the sandbox and check if it works.

import * as React from "react";
import { useState } from "react";

type UseBooleanFunction = (initial: boolean) => [boolean, UseBooleanActions];

export type UseBooleanActions = {
  setValue: React.Dispatch<React.SetStateAction<boolean>>;
  toggle: VoidFunction;
  setTrue: VoidFunction;
  setFalse: VoidFunction;
};

export type UseBoolean = [boolean, UseBooleanActions];

export const useBoolean: UseBooleanFunction = (initial) => {
  const [value, setValue] = useState<boolean>(initial);
  const toggle = () => setValue((v) => !v);
  const setTrue = () => setValue(true);
  const setFalse = () => setValue(false);
  const actions = { setValue, toggle, setTrue, setFalse };
  return [value, actions];
};

const OpenClosedSign = () => {
  const [isOpen, isOpenActions] = useBoolean(true);
  return (
    <div>
      <button onClick={isOpenActions.toggle}>Toggle</button>
      {isOpen ? "Open!" : "Closed!"}
    </div>
  );
};

export default OpenClosedSign;

It's all working nicely - although there is one major flaw! We do not memoize our callback functions, nor our 

 object, and that causes unnecessary re-renders. Let me show by example. I'm going to create a component that shows the timestamp of its last render.

---
title: How to Implement a Custom useBoolean React Hook
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/tkhde7gllj
code: https://gitlab.com/fullstackio/books/newline-course-apps/andrey-los-newline-guide-to-creating-a-react-hooks-library-app/-/tree/main/code/module_03/lesson_03.02/App?ref_type=heads
---

Okay. Let's implement the `useBoolean` hook.

Before we start we need to install `react` library. Let's add React as `devDependencies` and as `peerDependencies`:

```json
{
  "peerDependencies": {
    "react": ">=16.8.0"
  },
  "devDependencies": {
    "@types/react": "",
    "react": "16.13.1"
  }
}
```

Run `npm install`. This will install `react`. Note that when this library is published, React will not be installed automatically but will require the library user to have a version of React no lower than 16.8.0 (which added support for React Hooks API).

Once we have React installed we can start to implement our first `useBoolean` hook.

Let's create an array folder `./src/array` and a `useBoolean.ts` file inside it.

We start with types first.

`useBoolean` is the hook that takes the initial state as a parameter, and returns an array with two elements. The first element is our current value, and the second is a list of possible actions: `setTrue`, `setFalse` and `toggle` actions.

Let's create the `UseBooleanFunction` type with the signature of the hook API we want to get. To keep our users happy, it's also good practice to create and export the type of `useBoolean` function.

```ts
import React, { useState, SetStateAction } from "react";

type UseBooleanFunction = (initial: boolean) => [boolean, UseBooleanActions];

export type UseBooleanActions = {
  setValue: React.Dispatch<SetStateAction<boolean>>;
  toggle: VoidFunction;
  setTrue: VoidFunction;
  setFalse: VoidFunction;
};

export type UseBoolean = [boolean, UseBooleanActions];
```

Let's implement the hook itself now, starting with naive implementation.

```ts
import React, { useState, SetStateAction } from "react";

type UseBooleanFunction = (initial: boolean) => [boolean, UseBooleanActions];

export type UseBooleanActions = {
  setValue: React.Dispatch<SetStateAction<boolean>>;
  toggle: VoidFunction;
  setTrue: VoidFunction;
  setFalse: VoidFunction;
};

export type UseBoolean = [boolean, UseBooleanActions];

export const useBoolean: UseBooleanFunction = (initial) => {
  const [value, setValue] = useState<boolean>(initial);
  const toggle = () => setValue((v) => !v);
  const setTrue = () => setValue(true);
  const setFalse = () => setValue(false);
  const actions = { setValue, toggle, setTrue, setFalse };
  return [value, actions];
};

export default useBoolean;
```

All good. Let's test it! I'm using [codesandbox.io](https://codesandbox.io/) and good old copy-paste.

Open codesandbox.io and then click on the Create Sandbox button in the header. Search for React Typescript template and select it. After that copy-paste our code into the sandbox and check if it works.

```tsx
import * as React from "react";
import { useState } from "react";

type UseBooleanFunction = (initial: boolean) => [boolean, UseBooleanActions];