Gain insights into React Hooks for frontend development. Learn about components, state management, performance optimization with useMemo, context updates with useContext, and creating custom hooks. Explore application logic mastery.

Packt MBE - Designing React Hooks the right way.png

Web development has changed significantly in recent years. A web developer should not only know the basics of HTML, CSS, and JavaScript but also be proficient in frameworks such as Angular, React, and Vue. These frameworks make web development easier, enabling developers to focus on the application logic.

This course is designed for newcomers to React and experienced React developers alike. You’ll start by learning the most fundamental concept in React—components. Specifically, you’ll learn about function components. You’ll then learn how to manage application state and side effects. You’ll then learn about the useMemo hook to boost an application’s performance. You’ll learn about the useContext hook which enables us to perform area updates in our application. Finally, you’ll learn how to create custom hooks in React.

After completing this course, you can develop frontend applications with React. You’ll be able to develop complex web applications faster because React makes the process much easier.

Learn React Hooks for Frontend Development

Learn about the useClickOutside custom hook that is designed to detect clicks outside a specific component of the layout.

Prologue

Introducing the Function Component

Crafting States in Functions

Hooking into React

Use State to Jumpstart Components

Use Effect to Handle Side Effects

Use Memo to Boost Performance

Use Context to Cover an Area

Use Ref to Hide Stuff

Use Custom Hooks to Reuse Logic

Conclusion

Appendix: Exploring JavaScript and React

Improving User Interactivity Using the useClickOutside Hooks

Introduction to the `useClickOutside` hooks