Learn React Hooks

Learn React Hooks

by Daniel Bugl
Released October 2019
Publisher(s): Packt Publishing
ISBN: 9781838641443

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Create large-scale web applications with code that is extensible and easy to understand using React Hooks

Key Features

  • Explore effective strategies for migrating your state management from Redux and MobX to React Hooks
  • Integrate Hooks with React features such as Context and Suspense to add advanced functionality to your web apps
  • Create complex applications by combining multiple hooks

Book Description

React Hooks revolutionize how you manage state and effects in your web applications. They enable you to build simple and concise React.js applications, along with helping you avoid using wrapper components in your applications, making it easy to refactor code.

This React book starts by introducing you to React Hooks. You will then get to grips with building a complex UI in React while keeping the code simple and extensible. Next, you will quickly move on to building your first applications with React Hooks. In the next few chapters, the book delves into various Hooks, including the State and Effect Hooks. After covering State Hooks and understanding how to use them, you will focus on the capabilities of Effect Hooks for adding advanced functionality to React apps. You will later explore the Suspense and Context APIs and how they can be used with Hooks. Toward the concluding chapters, you will learn how to integrate Redux and MobX with React Hooks. Finally, the book will help you develop the skill of migrating your existing React class components, and Redux and MobX web applications to Hooks.

By the end of this book, you will be well-versed in building your own custom Hooks and effectively refactoring your React applications.

What you will learn

  • Understand the fundamentals of React Hooks and how they modernize state management in React apps
  • Build your own custom Hooks and learn how to test them
  • Use community Hooks for implementing responsive design and more
  • Learn the limitations of Hooks and what you should and shouldn't use them for
  • Get to grips with implementing React context using Hooks
  • Refactor your React-based web application, replacing existing React class components with Hooks
  • Use state management solutions such as Redux and MobX with React Hooks

Who this book is for

This book is for React developers who want to learn how to build applications with Hooks. Developers who are looking to migrate to React for its advanced feature set and capabilities will also find the book useful.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Learn React Hooks
  3. Dedication
  4. About Packt
    1. Why subscribe?
  5. Foreword
    1. About Nik Graf
  6. Contributors
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  7. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Code in Action
      4. Conventions used
    4. Get in touch
      1. Reviews
  8. Section 1: Introduction to Hooks
  9. Introducing React and React Hooks
    1. Technical requirements
    2. Principles of React
    3. Motivation for using React Hooks
      1. Confusing classes
      2. Wrapper hell
      3. Hooks to the rescue!
    4. Getting started with React Hooks
      1. Initializing a project with create-react-app
        1. Creating a new project
        2. Starting a project
        3. Deploying a project
      2. Starting with a class component
        1. Setting up the project
        2. Defining the class component
        3. Example code
      3. Using Hooks instead
        1. Setting up the project
        2. Defining the function component
        3. Example code
      4. Comparing the solutions
        1. Class component
        2. Function component with Hook
      5. Advantages of Hooks
      6. Migrating to Hooks
      7. The Hooks mindset
      8. Rules of Hooks
    5. Overview of various Hooks
      1. Hooks provided by React
        1. Basic Hooks
          1. useState
          2. useEffect
          3. useContext
        2. Additional Hooks
          1. useRef
          2. useReducer
          3. useMemo
          4. useCallback
          5. useLayoutEffect
          6. useDebugValue
      2. Community Hooks
        1. useInput
        2. useResource
        3. Navigation Hooks
        4. Life cycle Hooks
        5. Timer Hooks
        6. Other community Hooks
    6. Summary
    7. Questions
    8. Further reading
  10. Using the State Hook
    1. Technical requirements
    2. Reimplementing the useState function
    3. Problems with our simple Hook implementation
      1. Using a global variable
      2. Defining multiple Hooks
        1. Adding multiple Hooks to our component
        2. Implementing multiple Hooks
        3. Example code
      3. Can we define conditional Hooks?
        1. Example code
    4. Comparing our reimplementation with real Hooks
    5. Alternative Hook APIs
      1. Named Hooks
      2. Hook factories
      3. Other alternatives
    6. Solving common problems with Hooks
      1. Solving conditional Hooks
        1. Always defining the Hook
        2. Splitting up components
      2. Solving Hooks in loops
        1. Using an array
        2. Splitting up components
    7. Solving problems with conditional Hooks
      1. Example code
    8. Summary
    9. Questions
    10. Further reading
  11. Writing Your First Application with React Hooks
    1. Technical requirements
    2. Structuring React projects
      1. Folder structure
        1. Choosing the features
        2. Coming up with an initial structure
      2. Component structure
    3. Implementing static components
      1. Setting up the project
      2. Implementing users
        1. The Login component
        2. Testing out our component
        3. The Logout component
        4. The Register component
        5. The UserBar component
        6. Example code
      3. Implementing posts
        1. The Post component
        2. The CreatePost component
        3. The PostList component
      4. Putting the app together
      5. Example code
    4. Implementing stateful components with Hooks
      1. Adding Hooks for the users feature
        1. Adjusting UserBar
        2. Adjusting the Login and Register components
          1. Login
          2. Register
        3. Adjusting Logout
        4. Passing the user to CreatePost
      2. Adding Hooks for the posts feature
        1. Adjusting the App component
        2. Adjusting the CreatePost component
      3. Example code
    5. Summary
    6. Questions
    7. Further reading
  12. Section 2: Understanding Hooks in Depth
  13. Using the Reducer and Effect Hooks
    1. Technical requirements
    2. Reducer Hooks versus State Hooks
      1. Problems with the State Hook
      2. Actions
      3. Reducers
      4. The Reducer Hook
    3. Implementing Reducer Hooks
      1. Turning a State Hook into a Reducer Hook
        1. Replacing the user State Hook
          1. Defining actions
          2. Defining the reducer
          3. Defining the Reducer Hook
        2. Replacing the posts State Hook
          1. Defining actions
          2. Defining the reducer
          3. Defining the Reducer Hook
      2. Example code
      3. Merging Reducer Hooks
        1. Ignoring unhandled actions
      4. Example code
    4. Using Effect Hooks
      1. Remember componentDidMount and componentDidUpdate?
      2. Using an Effect Hook
        1. Trigger effect only when certain props change
        2. Trigger effect only on mount
        3. Cleaning up effects
      3. Implementing an Effect Hook in our blog app
      4. Example code
    5. Summary
    6. Questions
    7. Further reading
  14. Implementing React Context
    1. Technical requirements
    2. Introducing React context
      1. Passing down props
      2. Introducing React context
        1. Defining the context
        2. Defining the consumer
        3. Using Hooks
        4. Defining the provider
        5. Nested providers
      3. Example code
      4. Alternative to contexts
    3. Implementing themes
      1. Defining the context
      2. Defining the Context Hooks
        1. Creating the Header component
        2. Using the Header component
        3. Implementing the Context Hook for the Post component
      3. Defining the provider
      4. Dynamically changing the theme
        1. Using a State Hook with the context provider
        2. Implementing the ChangeTheme component
      5. Example code
    4. Using context for global state
      1. Defining StateContext
      2. Defining the context provider
      3. Using StateContext
        1. Refactoring user components
        2. Refactoring post components
      4. Example code
    5. Summary
    6. Questions
    7. Further reading
  15. Implementing Requests and React Suspense
    1. Technical requirements
    2. Requesting resources with Hooks
      1. Setting up a dummy server
        1. Creating the db.json file
        2. Installing the json-server tool
        3. Configuring package.json
        4. Configuring a proxy
        5. Defining routes
        6. Example code
      2. Implementing requests using Effect and State/Reducer Hooks
        1. Requests with Effect and State Hooks
        2. Requests with Effect and Reducer Hooks
        3. Example code
      3. Using axios and react-request-hook
        1. Setting up the libraries
        2. Using the useResource Hook
        3. Using useResource with a Reducer Hook
        4. Handling error state
        5. Implementing post creation
        6. Implementing registration
        7. Implementing login
      4. Example code
    3. Preventing unnecessary re-rendering with React.memo
      1. Implementing React.memo for the Post component
      2. Example code
    4. Implementing lazy loading with React Suspense
      1. Implementing React.Suspense
      2. Implementing React.lazy
      3. Example code
    5. Summary
    6. Questions
    7. Further reading
  16. Using Hooks for Routing
    1. Technical requirements
    2. Creating multiple pages
      1. Creating the HeaderBar component
      2. Creating the HomePage component
      3. Creating the PostPage component
        1. Testing out the PostPage
      4. Example code
    3. Implementing routing
      1. Defining routes
      2. Defining links
        1. Defining links to the posts
        2. Defining the links to the main page
      3. Adjusting the CREATE_POST action
      4. Example code
    4. Using routing Hooks
      1. Overview of Navi's Hooks
        1. The useNavigation Hook
        2. The useCurrentRoute Hook
        3. The useLoadingRoute Hook
      2. Programmatic navigation
      3. Accessing route information
      4. Example code
    5. Summary
    6. Questions
    7. Further reading
  17. Using Community Hooks
    1. Technical requirements
    2. Exploring the input handling Hook
      1. Implementing Input Hooks in our blog app
        1. The Login component
        2. The Register component
        3. The CreatePost component
      2. Example code
    3. React life cycles with Hooks
      1. The useOnMount Hook
      2. The useOnUnmount Hook
      3. The useLifecycleHooks Hook
      4. The useMergeState Hook
      5. Example code
    4. Various useful Hooks
      1. The usePrevious Hook
      2. Timer Hooks
        1. The useInterval Hook
        2. useTimeout Hook
      3. The Online Status Hook
      4. Data manipulation Hooks
        1. The useBoolean Hook
        2. The useArray Hook
        3. The useCounter Hook
      5. Focus and Hover Hooks
        1. The useFocus Hook
        2. The useHover Hook
      6. Example code
    5. Responsive design with Hooks
      1. Responsively hiding components
      2. Example code
    6. Undo/Redo with Hooks
      1. Implementing Undo/Redo in our post editor
      2. Debouncing with Hooks
      3. Debouncing changes in our post editor
      4. Example code
    7. Finding other Hooks
    8. Summary
    9. Questions
    10. Further reading
  18. Rules of Hooks
    1. Technical requirements
    2. Calling Hooks
    3. Order of Hooks
    4. Names of Hooks
    5. Enforcing the rules of Hooks
      1. Setting up eslint-plugin-react-hooks
      2. Example code
    6. Dealing with useEffect dependencies
      1. Automatically fixing warnings with eslint
      2. Example code
    7. Summary
    8. Questions
    9. Further reading
  19. Building Your Own Hooks
    1. Technical requirements
    2. Extracting custom Hooks
      1. Creating a useTheme Hook
      2. Creating global state Hooks
        1. Defining the useUserState Hook
        2. Defining the usePostsState Hook
      3. Creating a useDispatch Hook
      4. Creating API Hooks
      5. Creating a useDebouncedUndo Hook
      6. Exporting our custom Hooks
      7. Example code
    3. Using our custom Hooks
      1. Using the useTheme Hook
      2. Using the global state Hooks
        1. Adjusting the UserBar component
        2. Adjusting the Login component
        3. Adjusting the Register component
        4. Adjusting the Logout component
        5. Adjusting the CreatePost component
        6. Adjusting the PostList component
      3. Using the API Hooks
        1. Adjusting the ChangeTheme component
        2. Adjusting the Register component
        3. Adjusting the Login component
        4. Adjusting the CreatePost component
      4. Using the useDebouncedUndo Hook
      5. Example code
    4. Interactions between Hooks
      1. Creating a local Register Effect Hook
      2. Creating a local Login Effect Hook
      3. Example code
    5. Testing Hooks
      1. Using the React Hooks Testing Library
      2. Testing simple Hooks
        1. Creating the useCounter Hook
        2. Testing the useCounter Hook result
        3. Testing useCounter Hook actions
        4. Testing the useCounter initial value
        5. Testing reset and forcing re-rendering
      3. Testing Context Hooks
        1. Creating the ThemeContextWrapper
        2. Testing the useTheme Hook
        3. Creating the StateContextWrapper
        4. Testing the useDispatch Hook
        5. Testing the useUserState Hook
        6. Testing the usePostsState Hook
      4. Testing async Hooks
        1. The async/await construct
        2. Testing the useDebouncedUndo Hook
      5. Running the tests
      6. Example code
    6. Exploring the React Hooks API
      1. The useState Hook
      2. The useEffect Hook
      3. The useContext Hook
      4. The useReducer Hook
      5. The useMemo Hook
      6. The useCallback Hook
      7. The useRef Hook
      8. The useImperativeHandle Hook
      9. The useLayoutEffect Hook
      10. The useDebugValue Hook
    7. Summary
    8. Questions
    9. Further reading
  20. Section 3: Integration and Migration
  21. Migrating from React Class Components
    1. Technical requirements
    2. Handling state with class components
      1. Designing the app structure
      2. Initializing the project
      3. Defining the app structure
      4. Defining the components
        1. Defining the Header component
        2. Defining the AddTodo component
        3. Defining the TodoList component
        4. Defining the TodoItem component
        5. Defining the TodoFilter component
      5. Implementing dynamic code
        1. Defining the API code
        2. Defining the StateContext
        3. Making the App component dynamic
        4. Making the AddTodo component dynamic
        5. Making the TodoList component dynamic
        6. Making the TodoItem component dynamic
        7. Making the TodoFilter component dynamic
      6. Example code
    3. Migrating from React class components
      1. Migrating the TodoItem component
      2. Migrating the TodoList component
      3. Migrating the TodoFilter component
        1. Migrating TodoFilterItem
        2. Migrating TodoFilter
      4. Migrating the AddTodo component
      5. Migrating the App component
        1. Defining the actions
        2. Defining the reducers
          1. Defining the filter reducer
          2. Defining the todos reducer
          3. Defining the app reducer
        3. Migrating the component
      6. Example code
    4. Trade-offs of class components
    5. Summary
    6. Questions
    7. Further reading
  22. Redux and Hooks
    1. Technical requirements
    2. What is Redux?
      1. The three principles of Redux
        1. Single source of truth
        2. Read-only state
        3. State changes are processed with pure functions
    3. Handling state with Redux
      1. Installing Redux
      2. Defining state, actions, and reducers
        1. State
        2. Actions
        3. Reducers
      3. Setting up the Redux store
        1. Example code
      4. Defining action types
      5. Defining action creators
        1. Defining synchronous action creators
        2. Defining asynchronous action creators
      6. Adjusting the store
      7. Adjusting reducers
        1. Setting the initial state in Redux reducers
      8. Connecting components
        1. Connecting the AddTodo component
        2. Connecting the TodoItem component
        3. Connecting the TodoList component
        4. Adjusting the TodoList component
        5. Connecting the TodoFilter component
        6. Connecting the App component
      9. Setting up the Provider component
      10. Example code
    4. Using Redux with Hooks
      1. Using the dispatch Hook
        1. Using Hooks for the AddTodo component
        2. Using Hooks for the App component
        3. Using Hooks for the TodoItem component
      2. Using the Selector Hook
        1. Using Hooks for the TodoList component
        2. Using Hooks for the TodoFilter component
      3. Example code
      4. Creating reusable selectors
        1. Setting up reselect
        2. Memoizing selectors that only depend on state
        3. Example code
      5. Using the store Hook
    5. Migrating a Redux application
    6. Trade-offs of Redux
    7. Summary
    8. Questions
    9. Further reading
  23. MobX and Hooks
    1. Technical requirements
    2. What is MobX?
    3. Handling state with MobX
      1. Installing MobX
      2. Setting up the MobX store
      3. Defining the Provider component
      4. Connecting components
        1. Connecting the App component
        2. Connecting the TodoList component
        3. Connecting the TodoItem component
        4. Connecting the AddTodo component
        5. Connecting the TodoFilter component
      5. Example code
    4. Using MobX with Hooks
      1. Defining a store Hook
      2. Upgrading components to Hooks
        1. Using Hooks for the App component
        2. Using Hooks for the TodoList component
        3. Using Hooks for the TodoItem component
        4. Using Hooks for the AddTodo component
        5. Using Hooks for the TodoFilter component
      3. Example code
      4. Using the local store Hook
      5. Example code
    5. Migrating a MobX application
    6. The trade-offs of MobX
    7. Summary
    8. Questions
    9. Further reading
  24. Assessments
    1. Answers to questions
      1. Chapter 1: Introducing React and React Hooks
      2. Chapter 2: Using the State Hook
      3. Chapter 3: Writing Your First Application with React Hooks
      4. Chapter 4: Using the Reducer and Effect Hooks
      5. Chapter 5: Implementing React Context
      6. Chapter 6: Implementing Requests and React Suspense
      7. Chapter 7: Using Hooks for Routing
      8. Chapter 8: Using Community Hooks
      9. Chapter 9: Rules of Hooks
      10. Chapter 10: Building Your Own Hooks
      11. Chapter 11: Migrating from React Class Components
      12. Chapter 12: Redux and Hooks
      13. Chapter 13: MobX and Hooks
  25. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Learn React Hooks
  • Author(s): Daniel Bugl
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781838641443