book

Designing React Hooks the Right Way

Name: Designing React Hooks the Right Way
Author: Fang Jin
ISBN: 9781803235950

by Fang Jin

January 2022

Intermediate to advanced

278 pages

5h 35m

English

Packt Publishing

Read now

Unlock full access

Designing React Hooks the Right Way
ForewordContributorsAbout the authorAbout the reviewers
Preface
Who this book is forWhat this book coversTo get the most out of this bookRefresh your knowledge of ReactUse a browser without building the codeBuild the code yourselfDownload the color imagesConventions usedGet in touchShare Your Thoughts
Chapter 1: Introducing the Function Component
History of UI componentsjQueryAngularReactLitElementBuilding an app with componentsMultiple pagesIntroducing the function componentFunction props Children propParent and childWriting a function componentExample of a function componentSummaryQuestions and answersAppendixAppendix A – How many component types does React support?
Chapter 2: Crafting States in Functions
Technical requirementsCrafting a state in a function componentRequesting a new updateMaking a value persistentSupport multiple statesListen to a value changePerforming a task at the mountApplying states to single-page applicationHow states work with UI SummaryQuestions and answers
Chapter 3: Hooking into React
Creating a good state solutionIntroducing a React HookUpdating a function componentCreating a Hook at the mountObtaining a Hook at the updateUsing a HookWhat is a Hook?A hook is a functionA hook's calling orderConditional hook issueAvoiding conditional hooksSummaryQuestions and answersAppendixAppendix A – React FiberAppendix B – Current and WorkInProgress Scenes
Chapter 4: Use State to Jumpstart Components
State in ReactuseState designuseState data structureMounting a stateDispatching an actionUpdating a stateReturning the hookA walkthrough of useStateDispatching statesComparing statesMultiple dispatchesTest driving the useState hookLetting a child driveLifting up to the parentuseState examplesMaking an avatar componentMaking a custom tooltip componentSummaryQuestions and answersAppendixAppendix A – Skipping the dispatchAppendix B – Bailing out an update
Chapter 5: Use Effect to Handle Side Effects
What is a side effect?Introducing passive effectsUnderstanding useEffect designThe useEffect hook's data structureMounting an effectUpdating an effectScheduling effectsFlushing effectsA walk-through of the useEffect hookCreating effectsCreating and destroyingTest driving the useEffect hookMissing dependenciesInfinite loopsuseEffect examplesFinding the window sizeFetching an API resourceSummaryQuestions and answersAppendixAppendix A – React side effectsAppendix B - Flushing passive effectsAppendix C – Is a dispatch asynchronous?
Chapter 6: Use Memo to Boost Performance
Performance degradationReusing a previous assignmentUnderstanding the useMemo designReusing a last assignmentAssignment value typeThe myth of skipping an updateTest-Driving useMemouseMemo examplesClicking to searchDebouncing the searchSummaryQuestionsAppendixAppendix A – Not a Classical MemorizationAppendix B – Skipping a Child Update
Chapter 7: Use Context to Cover an Area
What is an area update?Props approachCombined dispatch approachIntroducing the React contextUnderstanding the useContext designuseContext data structureuseContext workflowTest driving useContextChanging the context valueuseContext examplesTheme contextTable contextSummaryQuestions and answersAppendixAppendix A – Propagating a contextAppendix B – Context scope and value
Chapter 8: Use Ref to Hide Stuff
Accessing DOM elementsAttach and de-attachUnderstanding useRef designState without an updateTest driving useRefControlling a child refuseRef examplesClicking outside the menuAvoiding memory leaksSetting up a mule Locating the current valueSummaryQuestions and answersAppendixAppendix A – Callback refAppendix B – Forward ref

Chapter 9: Use Custom Hooks to Reuse Logic
Reviewing React hooksMaking a new hookWriting a custom hookuseToggleUsagesReferencesuseWindowUsagesReferencesuseAsyncUsagesReferencesuseDebouncedUsagesuseClickOutsideUsagesReferencesuseCurrentUsagesReferencesuseProxyUsagesReferencesSummaryQuestions and answers
Chapter 10: Building a Website with React
Exploring functions of ReactEmbracing JavaScript ES6Arrow functionSpread and restObject enhancementTemplate stringsDestructuringlet and constModulesSymbolAdopting CSS-in-JS approach styled-SXstyled-componentsGoing from HTML to JSXPropsChildrenElement typeReact elementSummaryQuestions and answers
Why subscribe?
Other Books You May EnjoyPackt is searching for authors like you

Overview

Dive deep into the world of React Hooks with 'Designing React Hooks the Right Way.' This book demystifies the concept of hooks and demonstrates how to effectively integrate them into your React projects. By the end of this book, you will have learned how to leverage hooks to manage state, side effects, and optimize performance in functional components.

What this Book will help me do

Create custom hooks tailor-made for unique application requirements.
Master the useEffect hook for responding efficiently to component lifecycle events.
Optimize UI performance through the useMemo hook while dealing with computationally intensive tasks.
Streamline global state management using hooks like useContext.
Adopt best practices to avoid common pitfalls, such as memory leaks, when employing hooks like useRef.

Author(s)

None Jin is an experienced web developer and educator specializing in React. With years of expertise in building scalable web applications, None Jin has a knack for simplifying complex technical concepts for learners. Through hands-on guidance and detailed examples, this book reflects their practical approach to teaching React technologies.

Who is it for?

This book is perfect for web developers familiar with basic React concepts and eager to deepen their understanding of Hooks. If you are building scalable applications or aiming to enhance performance in React projects, this book is for you. It's also suited for developers transitioning from class-based components to functional components, looking to fully utilize modern React paradigms like Hooks.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

React and Libraries: Your Complete Guide to the React Ecosystem

Publisher Resources

ISBN: 9781803235950

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills