Learn advanced topics of React for building dynamic user interfaces with reusable components, allowing for efficient updates and rendering.

Zero to Hero in Front-end Development with React

React is one of the front-end frameworks of JavaScript. This module starts with the Context API, refs, error boundaries, portals, and code splitting. Next, we will learn about hooks, Redux and routing, and internationalization. After completing this module, we will be able to use React professionally.

React Deep Dive: Advanced Approaches

(Select all that apply.) Which of the following are internal Hooks in React?

(Select all that apply.) Which of the following are internal Hooks in React?

What is the second value returned from the array in the `useState()` Hook?

What is the second value returned from the array in the <code>useState()</code> Hook?

Why does the <code>useReducer()</code> Hook exist?

What’s the third parameter of the `useReducer()` Hook?

What’s the third parameter of the <code>useReducer()</code> Hook?

True or False: The `useCallback()` Hook is used to optimize the performance of an application.

True or False: The <code>useCallback()</code> Hook is used to optimize the performance of an application.

When we want to re-render the application as soon as the state changes

When we want to perform complex computational tasks that do not need to be executed in each render

When we want to read the layout from the DOM

When should we use the <code>useMemo()</code> Hook?

True or False: The `useLayoutEffect()` Hook is executed before the layout phase of the browser but after the paint phase.

True or False: The <code>useLayoutEffect()</code> Hook is executed before the layout phase of the browser but after the paint phase.

The effect function will only run on the first render of the component

The effect function will run on every render of the component

What happens if an empty dependency array is passed to the `useEffect()` Hook?

What happens if an empty dependency array is passed to the <code>useEffect()</code> Hook?

True or False: Objects are not merged with their previous state and the old state is replaced by the new state in `this.setState()`.

True or False: Objects are not merged with their previous state and the old state is replaced by the new state in <code>this.setState()</code>.

Quiz

Quiz

Test yourself on what you learned about the Hooks API.

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Appendix

Conclusion

Quiz