React 16.8 introduced Hooks like `useState` for using stateful logic in our function components, and `useEffect` for side effects previously only used in class-based components.

The React Team has given developers a way that simplifies using core features, but what's that mean for the code that you write?

In this self-paced workshop, you'll work through refactoring a component to use a custom hook, and learn to apply the patterns used by the React team to your own code.

Follow the React Team's lead, and make your code more readable, reusable, and reasonable!

In this lesson, you will learn how to take a class component which uses state and convert it to a function component which utilizes the State Hook. The state hook returns a two-item array: the first item is the state value and the second value is the function to update the state value. 

Remember, Hooks can only be used in function components.

Change a Stateful React Class Component to a Function Component with the State Hook

Similar to the State Hook, the [Effect Hook](https://reactjs.org/docs/hooks-effect.html) is “first-class” in React and handy for performing side effects in function components. The Effect Hook is called by passing a function as the first argument. Here, you can perform side effects. If needed, you can pass an optional second argument, which is an array of dependencies. This tells React, "Only run my effect when these values change."

A tip from Ryan Florence on using the dependency array:

"[with which state does this effect synchronize with](https://twitter.com/ryanflorence/status/1125041041063665666?s=20)."

Use the React Effect Hook in Function Components

Writing your own custom State Hook is not as a daunting as you think. To keep things simple, we'll refactor our `text` state value that uses `useState` and instead create a custom hook called `useText`.

Write a Custom State Hook in React

Similar to writing a custom State Hook, we’ll write our own Effect Hook called `useStarWarsQuote`, which returns a random quote and a loading state.

Remember, hooks can only be used inside function components.

Write a Custom React Effect Hook

After writing your own custom hook, you can extract it into it’s own module using create-react-hook. This will let you bundle it as an npm package to easily share between projects and with the open source community. We'll extract our `useStarWarsQuote` from the previous video in it's own module. 


Extract a Custom Hook into its own Module with create-react-hook

It's always important to test your code, especially if you're open-sourcing it for others to use. In this video, we'll learn how to use [`react-hooks-testing-library`](https://github.com/testing-library/react-hooks-testing-library) to write a few tests for our custom hook.

Test your Custom Hook Module with react-hooks-testing-library

Before we publish our package, we want to make sure everything is set up correctly. We’ll cover versioning, preparing our package, adding a proper README, and updating our `package.json`.

Prepare a Custom React Hook to be Published as an npm Package

The final step in our journey is publishing our custom hook as an npm package. In this video, we'll see how to login to the npm cli and publish our package to the npm registry. 

Shareable Custom Hooks in React

Instructor

What you'll learn

Course Content