Helion


Szczegóły ebooka

Designing React Hooks the Right Way

Designing React Hooks the Right Way

Fang Jin

Kup pozycję na ebookpoint.pl

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.

  • Designing React Hooks the Right Way
  • Foreword
  • Contributors
  • About the author
  • About the reviewers
  • Preface
    • 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
  • Chapter 1: Introducing the Function Component
    • 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?
  • 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 hooks 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
    • Why subscribe?
  • Other Books You May Enjoy
    • Packt is searching for authors like you

  • Tytuły: Designing React Hooks the Right Way
  • Autor: Fang Jin
  • Tytuł oryginału: Designing React Hooks the Right Way
  • ISBN Ebooka: 9781803237527, 9781803237527
  • Data wydania: 2022-01-11
  • Identyfikator pozycji: e_2t5a
  • Kategorie:
    Ebooki » Informatyka » Webmasterstwo
  • Wydawca: Packt Publishing