Designing React Hooks the Right Way: Explore design techniques and solutions to debunk the myths about adopting states using React Hooks

Description

Get to grips with React Hooks and design your own custom Hook to manage application states for making better decisions in site architecture Key FeaturesGet to grips with Hooks' design and understand each built-in Hook's pitfalls with examplesDiscover how to turn your existing code into a reusable Hook via code refactoringExplore design solutions to identify and solve site performance issues involving HooksBook Description React hook creates a unique solution for using states in function components to orchestrate UI communication. They provide you with an easy interface to write custom data management solutions with low development and maintenance costs. Understanding how Hooks are designed enables you to use them more effectively, and this book helps you to do just that. This book starts with a custom-crafted solution to reveal why Hooks are needed in the first place. You will learn about the React engine and discover how each built-in Hook can manage a persistent value by hooking into it. You will walk through the design and implementation of each hook with code so that you gain a solid understanding. Finally, you'll get to grips with each Hook's pitfalls and find out how to effectively overcome them. By the end of this React book, you'll have gained the confidence to build and write Hooks for developing functional and efficient web applications at scale. What you will learnCreate your own hooks to suit your state management requirementDetect the current window size of your website using useEffectDebounce an action to improve user interface (UI) performance using useMemoEstablish a global site configuration using useContextAvoid hard-to-find application memory leaks using useRefDesign a simple and effective API data layer using custom HooksWho this book is for This book is for web developers who are looking for a consistent and efficient approach for applying application states with Hooks. Basic knowledge of React will help you to get the most out of this book. Table of ContentsIntroducing the Function ComponentCrafting States in FunctionsHooking into ReactUse State to Jumpstart ComponentsUse Effect to Handle Side EffectsUse Memo to Boost PerformanceUse Context to Cover an AreaUse Ref to Hide StuffUse Custom Hook to Reuse LogicBuilding a Website with React Cover Title page Copyright and Credits Dedication Foreword Contributors Table of Contents Preface Chapter 1: Introducing the Function Component History of UI components jQuery AngularJS React LitElement Building an app with components Multiple pages Introducing the function component Function props Children prop Parent and child Writing a function component Example of a function component Summary Questions and answers Appendix Appendix A – How many component types does React support? Chapter 2: Crafting States in Functions Technical requirements Crafting a state in a function component Requesting a new update Making a value persistent Support multiple states Listen to a value change Performing a task at the mount Applying states to single-page application How states work with UI Summary Questions and answers Chapter 3: Hooking into React Creating a good state solution Introducing a React Hook Updating a function component Creating a Hook at the mount Obtaining a Hook at the update Using a Hook What is a Hook? A hook is a function A hook's calling order Conditional hook issue Avoiding conditional hooks Summary Questions and answers Appendix Appendix A – React Fiber Appendix B – Current and WorkInProgress Scenes Chapter 4: Use State to Jumpstart Components State in React useState design useState data structure Mounting a state Dispatching an action Updating a state Returning the hook A walkthrough of useState Dispatching states Comparing states Multiple dispatches Test driving the useState hook Letting a child drive Lifting up to the parent useState examples Making an avatar component Making a custom tooltip component Summary Questions and answers Appendix Appendix A – Skipping the dispatch Appendix B – Bailing out an update Chapter 5: Use Effect to Handle Side Effects What is a side effect? Introducing passive effects Understanding useEffect design The useEffect hook's data structure Mounting an effect Updating an effect Scheduling effects Flushing effects A walk-through of the useEffect hook Creating effects Creating and destroying Test driving the useEffect hook Missing dependencies Infinite loops useEffect examples Finding the window size Fetching an API resource Summary Questions and answers Appendix Appendix A – React side effects Appendix B - Flushing passive effects Appendix C – Is a dispatch asynchronous? Chapter 6: Use Memo to Boost Performance Performance degradation Reusing a previous assignment Understanding the useMemo design Reusing a last assignment Assignment value type The myth of skipping an update Test-Driving useMemo useMemo examples Clicking to search Debouncing the search Summary Questions Appendix Appendix A – Not a Classical Memorization Appendix B – Skipping a Child Update Chapter 7: Use Context to Cover an Area What is an area update? Props approach Combined dispatch approach Introducing the React context Understanding the useContext design useContext data structure useContext workflow Test driving useContext Changing the context value useContext examples Theme context Table context Summary Questions and answers Appendix Appendix A – Propagating a context Appendix B – Context scope and value Chapter 8: Use Ref to Hide Stuff Accessing DOM elements Attach and de-attach Understanding useRef design State without an update Test driving useRef Controlling a child ref useRef examples Clicking outside the menu Avoiding memory leaks Setting up a mule Locating the current value Summary Questions and answers Appendix Appendix A – Callback ref Appendix B – Forward ref Chapter 9: Use Custom Hooks to Reuse Logic Reviewing React hooks Making a new hook Writing a custom hook useToggle Usages References useWindow Usages References useAsync Usages References useDebounced Usages useClickOutside Usages References useCurrent Usages References useProxy Usages References Summary Questions and answers Chapter 10: Building a Website with React Exploring functions of React Embracing JavaScript ES6 Arrow function Spread and rest Object enhancement Template strings Destructuring let and const Modules Symbol Adopting CSS-in-JS approach styled-SX styled-components Going from HTML to JSX Props Children Element type React element Summary Questions and answers Index About Packt Other Books You May Enjoy