Designing React Hooks the Right Way
Close
    • Designing React Hooks the Right Way
    • Foreword
    • Contributors
    • About the author
    • About the reviewers
    • Who this book is for
    • What this book covers
    • To get the most out of this book
    • Refresh your knowledge of React
    • Use a browser without building the code
    • Build the code yourself
    • Download the color images
    • Conventions used
    • Get in touch
    • Share Your Thoughts
    • History of UI components
    • jQuery
    • Angular
    • 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?
    • 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
    • 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
    • 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
    • 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?
    • 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
    • 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
    • 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
    • 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
    • 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

Community Questions