React 16.8.1 was just released, and hooks are finally stable! If you have literally 12 minutes to spare, you can learn how to use hooks (useState, useEffect and useMemo) as well as brand new React features such as React.lazy and React.memo.

Enjoy!

Most React developers knows the pain of refactoring a functional component only because we would like to add a state to it.

In this lesson we are going to learn a new way of handling that - React 16.7 alpha introduces a concept of hooks, which allow us to well... hook into existing React features (such as state) from inside of a functional component. By using a `useState` hook we introduce state to a `Counter` component without introducing a class.

Add state to functional React component with useState hook without introducing a class

*Note:* React hooks are currently in React v16.7.0-alpha and being discussed in an open RFC.

When using the `useState` hook it's important to remember that the function updating the state returned from this hook works a little different than the `setState` from `React.Component`. In this lesson we are going to learn how we can handle multiple state values when using the React `useState` hook following an example of a simple app with two counters to highlight possible issues we might encounter and how to solve them.

Handle multiple state values when using useState React hook

In this lesson we are going to learn how to use `useEffect` hook from React 16.7 to be able to create a custom hook which allows us to see how often the component mounts and unmounts. 

Later, we can reuse it in other components and improve app performance by diving deep into how many times our components are mounted and/or unmounted. 

Use React useEffect hook to see how many times component mounts and unmounts

When using functional components in React we may run into situations where we are performing expensive calculations multiple times, even though the values passed in to the functional component hasn't changed.

This is where `useMemo` hook comes in. In this lesson we are going to learn how to use `useMemo` hook to optimize an expensive (in this example - highly expensive operation of adding two numbers together, for simplicity) operation so that its result is recalculated only when it's necessary - that is, when the input arguments have changed. Otherwise, we are going to use an optimized, memoized result.

Optimize expensive operations with React useMemo hook

A new way of doing code-splitting in React apps has been released in [React v16.6.0](https://reactjs.org/blog/2018/10/23/react-v-16-6.html). It allows us to use `Suspense` tag with dynamic `import` statements to send heavy components over the wire to the user when they are needed and not before.

In this example we are going to see how to use React.lazy and Suspense to avoid sending whole of lodash and moment JS libraries and instead do it once it's actually necessary.

Use React.lazy to do code-splitting with React Suspense

Class components can bail out from rendering when their input props are the same using `PureComponent` or `shouldComponentUpdate`. Since React 16.6 you can do the same with function components by wrapping them in [React.memo](https://reactjs.org/docs/react-api.html#reactmemo).

Learn React hooks, lazy, and memo API

Instructor

Course content (6 lessons)

Instructor