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