Learn React Hooks
Build and refactor modern React.js applications using Hooks
Daniel Bugl
BIRMINGHAM - MUMBAI
Copyright © 2019 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor: Pavan Ramchandani
Acquisition Editor: Heramb Bhavsar
Content Development Editor: Keagan Carneiro
Senior Editor: Mohammed Yusuf Imaratwale
Technical Editor: Suwarna Patil
Copy Editor: Safis Editing
Project Coordinator: Manthan Patel
Proofreader: Safis Editing
Indexer: Pratik Shirodkar
Production Designer: Aparna Bhagat
First published: October 2019
Production reference: 1181019
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-83864-144-3
Subscribe to our online digital library for full access to over 7,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Fully searchable for easy access to vital information
Copy and paste, print, and bookmark content
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at customercare@packtpub.com for more details.
At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
When Hooks were initially released, I was excited, but also skeptical. Being able to rely only on functions was fantastic. On the other hand, Hooks such as useEffect required the whole React community to rethink how to approach managing side effects.
Hooks made it very easy to handle the most commonplace things, such as rendering and managing state. For such things, most of the time, you can get away with not actually knowing that much about Hooks. Still, now and then, you will need to handle more complex requirements and this requires you to have a deep understanding of when to apply which Hook.
In his book, Daniel starts from the very beginning. Anyone with a basic understanding of React can get started with it. Even so, this book goes very deep and even someone experienced with Hooks will most likely learn something new since Daniel also touches on design decisions and shows basic implementations of the presented concepts. Also, while he covers the theory well, each chapter has plenty of hands-on examples.
Nik Graf
ReactVienna organizer
ReasonConf organizer
Nik Graf initiated the ReactVienna Meetup in 2015. He has created several open source projects, including DraftJs plugins, Polished, and Belle, which all featured at Stripe's Open-Source Retreat in 2016. As a consultant/freelancer, he supports multiple companies with their frontend architecture using React and GraphQL. In addition to that, he produces video courses, which can be found on his personal website: https://www.nikgraf.com.
When React Hooks were released, Nik created a searchable collection of community-created Hooks at https://nikgraf.github.io/react-hooks/.
Daniel Bugl is a developer, product designer, and entrepreneur focusing on web technologies. He has a Bachelor of Science degree in business informatics and information systems and is now studying data science at the Vienna University of Technology (TU Wien). He is a contributor to many open source projects and a member of the React community. He also founded and runs his own hardware/software start-up, TouchLay, which helps other companies present their products and services. At his company, he constantly works with web technologies, particularly making use of React and React Hooks.
Farzad YousefZadeh is a self-taught senior software engineer and an international conference speaker with an academic background in aerospace engineering and astrophysics. He lives in Finland with his wife and their cat. He mainly works with JavaScript and TypeScript on different platforms, but he is most passionate about client-side applications, thriving to solve UI development challenges by studying revolutionary approaches. He is fascinated by tooling around with development
experience and automation. He is an active member of the open source community by constantly contributing to OSS, public technical speaking, and volunteering in free educational programs.
Kirill Ezhemenskii is an experienced software engineer, a frontend and mobile developer, a solution architect, and the CTO at a healthcare company. He's a functional programming advocate and an expert in the React stack, GraphQL, and TypeScript. He's also a React native mentor.
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
React is a JavaScript library for building efficient and extensible web applications. React is developed by Facebook and is used in many large-scale web applications, such as Facebook, Instagram, Netflix, and WhatsApp Web.
React Hooks were introduced in the React 16.8 release and solve many common problems with React projects. Hooks make components less complex, more concise, and easier to read and refactor. Furthermore, they make many React features much easier to use and understand, and we avoid having to use wrapper components.
This book is the definitive guide to learning React Hooks. You are going to learn all the facets of React Hooks for managing state and effects in React components, as well as using other React features, such as context, via Hooks. With practical examples, you are going to learn how to develop large-scale and efficient applications with code that is extensible and easy to understand.
The book also delves into advanced concepts, such as using Hooks in combination with libraries like Redux and MobX. Furthermore, you are going to learn when and how existing projects can be efficiently migrated to React Hooks.
The book is intended for web developers at any level of expertise with JavaScript and the React framework. The book will also cater to developers who have been migrating to React for its advanced feature set and capabilities.
Chapter 1, Introducing React and React Hooks, covers the fundamental principles of React and React Hooks, what they are and why to use them. We then learn about the functionality of Hooks by introducing the State Hook as an alternative to React state in class components. Finally, we introduce the kinds of Hooks React provides and introduce a couple of Hooks that we are going to learn about throughout the book.
Chapter 2, Using the State Hook, explains how Hooks work in depth by reimplementing the useState Hook. By doing so, we find out that there are certain limitations of Hooks. We are then going to compare our reimplementation of a Hook with real Hooks. Furthermore, we introduce alternative Hook APIs and discuss the problems they have. Finally, we learn how to solve common problems with Hooks, such as conditional Hooks and Hooks in loops.
Chapter 3, Writing Your First Application with React Hooks, takes what we learned from the first two chapters and puts it into practice by developing a blog application using React Hooks, specifically the State Hook. In this chapter, we also learn how to structure React projects in a way that scales well.
Chapter 4, Using the Reducer and Effect Hooks, moves on from learning about the simple State Hook and using it in practice. We are going to learn about the other two main Hooks predefined by the React library: the Reducer and Effect Hooks. We first learn when we should use a Reducer Hook instead of a State Hook. Then we learn how to turn our existing State Hook into a Reducer Hook to get an idea of the concept. Finally, we learn how to use Effect Hooks for more advanced functionality.
Chapter 5, Implementing React Context, explains React context and how it can be used in our application. Then we implement React context in our blog application to provide theming functionality and global state using Context Hooks.
Chapter 6, Implementing Requests and React Suspense, covers requesting resources from a server with Hooks using an Effect Hook and a State or Reducer Hook. Then we learn how to use React.memo to prevent unnecessary component re-renders. Finally, we learn about React Suspense, which can be used to defer rendering until a condition is met, also called lazy loading.
Chapter 7, Using Hooks for Routing, explains how to use Hooks to implement routing in our blog application. We learn about Navi, a routing library for React that makes use of Hooks and Suspense. We start by implementing pages in our application, then define routes, and finally move on to implementing routing Hooks.
Chapter 8, Using Community Hooks, explains that the React community has already developed various libraries that make use of Hooks. In this chapter, we learn about implementing various Hooks from the community, as well as where to find more of them. We first learn about the input handling Hook. Next, we learn how to replace React life cycle methods with Hooks. Then, we learn about various useful Hooks and responsive design with Hooks. Furthermore, we learn how to implement undo/redo functionality using Hooks. Finally, we learn where to find other Hooks provided by the community.
Chapter 9, Rules of Hooks, covers the rules of Hooks. Having a grasp on the rules of Hooks is very important for building our own Hooks, which we are going to do in the next chapter. We also learn about the limitations of Hooks in depth and discover what we need to watch out for. Finally, we learn how to enforce the rules of Hooks using a linter.
Chapter 10, Building Your Own Hooks, moves on from the basic concepts of Hooks. We are now going to build our own Hooks. We start by extracting a custom Hook from an existing function of our blog application, and then we learn how to use our custom Hook. Next, we learn about passing information between Hooks. Finally, we learn about the React Hooks API and additional Hooks we can use to build our own Hooks. At the end of this chapter, our application will be fully powered by Hooks!
Chapter 11, Migrating from React Class Components, covers state handling with React class components. We start by implementing a simple ToDo application with class components. Then, we learn how to migrate an existing project using class components to a Hook-based implementation. Finally, we learn about the trade-offs of using class components versus Hooks and a strategy to efficiently migrate existing projects.
Chapter 12, Redux and Hooks, explains state handling with Redux. We start by migrating our existing ToDo application to Redux, and then we learn how to use Redux with Hooks. Furthermore, we learn how to migrate an existing Redux application to Hooks. Finally, we learn about the trade-offs of using Redux.
Chapter 13, MobX and Hooks, covers state handling with MobX. We start by migrating our existing ToDo application to MobX. Then we learn how to use MobX with Hooks. Furthermore, we learn how to migrate an existing MobX application to Hooks. Finally, we learn about the trade-offs of using MobX.
We assume that you have already worked with React in some way, although this book should be understandable for complete beginners of React as well.
Please note that it is highly recommended that you write the code on your own. Do not simply run the code examples that are provided. It is important to write the code yourself in order to learn and understand it properly. However, if you run into any issues, you can always refer to the code example.
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learn-React-Hooks. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781838641443_ColorImages.pdf.
Visit the following link to check out videos of the code being run:
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, folder names, filenames, file extensions, pathnames, dummy URLs, and user input. Here is an example: "JavaScript classes provide a render method, which returns the user interface (usually via JSX)."
A block of code is set as follows:
class Example extends React.Component {
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
constructor (props) {
super(props)
this.state = { name: '' }
this.handleChange = this.handleChange.bind(this)
}
Any command-line input or output is written as follows:
> npm run-script build
Bold: Indicates a new term, an important word, or words that you see onscreen. Here is an example: " Throughout this chapter, we are also going to learn about JSX, and new JavaScript features that have been introduced in ES6, up to ES2018."
In blocks of code, we use bold formatting to highlight changes in the code. Usually, we highlight new code using bold. If specified, we might also indicate which parts of code should be deleted by using bold formatting.
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at customercare@packtpub.com.
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at copyright@packt.com with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.
In the first part of the book, we will introduce and cover the basics of React and React Hooks, including why and how to use them. Following this, we will use our knowledge gained in a practical setting, to create a blog application using React Hooks.
In this section, we will cover the following chapters:
React is a JavaScript library that can be used to build efficient and extensible web applications. React was developed by Facebook, and is used in many large-scale web applications, such as Facebook, Instagram, Netflix, and WhatsApp Web.
In this book, we are going to learn how to build complex and efficient user interfaces with React, while keeping the code simple and extensible. Using the new paradigm of React Hooks, we can greatly simplify dealing with state management and side effects in web applications, ensuring the potential for growing and extending the application later on. We are also going to learn about React context and React Suspense, as well as how they can be used with Hooks. Afterward, we are going to learn how to integrate Redux and MobX with React Hooks. Finally, we are going to learn how to migrate from existing React class components, Redux, and MobX web applications, to React Hooks.
In the first chapter of this book, we are going to learn about the fundamental principles of React and React Hooks. We start by learning what React and React Hooks are, and why we should use them. Then, we move on to learn about the functionality of Hooks. Finally, we give an introduction to the kinds of Hooks that are provided by React, and a couple of Hooks that we are going to learn about throughout the book. By learning the fundamentals of React and React Hooks, we will be better able to understand the concepts that will be introduced in this book.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0, or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter01.
Check out the following video to see the code in action:
Now, let's get started with the chapter.
Before we start learning about React Hooks, we are going to learn about the three fundamental principles of React. These principles allow us to easily write scalable web applications. The fundamental principles are important to know, as they will help us to understand how and why Hooks fit into the React ecosystem.
React is based on three fundamental principles:
const input = ['a', 'b', 'c']
let result = []
for (let i = 0; i < input.length; i++) {
result.push(input[i] + input[i])
}
console.log(result) // prints: [ 'aa', 'bb', 'cc' ]
As we can see, in imperative code, we need to tell the computer exactly what to do, step by step. However, with declarative code, we can simply tell the computer what we want, as follows:
const input = ['a', 'b', 'c']
let result = input.map(str => str + str)
console.log(result) // prints: [ 'aa', 'bb', 'cc' ]
In the previous declarative code, we tell the computer that we want to map each element of the input array from str to str + str. As we can see, declarative code is much more concise.
We just mentioned that React is component-based. In React, there are two types of components:
While function components are easier to define and understand, class components were needed to deal with state, contexts, and many more of React's advanced features. However, with React Hooks, we can deal with React's advanced features without needing a class component!
React's three fundamental principles make it easy to write code, encapsulate components, and share code across multiple platforms. Instead of reinventing the wheel, React always tries to make use of existing JavaScript features as much as possible. As a result, we are going to learn software design patterns that will be applicable in many more cases than just designing user interfaces.
React always strives to make the developer experience as smooth as possible, while ensuring that it is kept performant enough, without the developer having to worry too much about how to optimize performance. However, throughout the years of using React, a couple of problems have been identified.
Let's take a look at these problems in detail in the following sections.
In the past, we had to use class components with special functions called life cycle methods, such as componentDidUpdate, and special state-handling methods, such as this.setState, in order to deal with state changes. React classes, and especially the this context, which is a JavaScript object, are hard to read and understand for both humans and machines.
this is a special keyword in JavaScript that always refers to the object that it belongs to:
For humans, classes are hard because this always refers to different things, so sometimes (for example, in event handlers) we need to manually rebind it to the class object. For machines, classes are hard, because the machines do not know which methods in a class will be called, and how this will be modified, making it hard to optimize performance and remove unused code.
Furthermore, classes sometimes require us to write code in multiple places at once. For example, if we want to fetch data when the component renders, or the data updates, we need to do this using two methods: once in componentDidMount, and once in componentDidUpdate.
To give an example, let's define a class component that fetches data from an Application Programming Interface (API):
class Example extends React.Component {
componentDidMount () {
fetch(`http://my.api/${this.props.name}`)
.then(...)
}
componentDidUpdate (prevProps) {
if (this.props.name !== prevProps.name) {
fetch(`http://my.api/${this.props.name}`)
.then(...)
}
}
}
fetchData () {
fetch(`http://my.api/${this.props.name}`)
.then(...)
}
componentDidMount () {
this.fetchData()
}
componentDidUpdate (prevProps) {
if (this.props.name !== prevProps.name) {
this.fetchData()
}
}
However, even then we still need to call fetchData in two places. Whenever we update arguments that are passed to the method, we need to update them in two places, which makes this pattern very prone to errors and future bugs.
Before Hooks, if we wanted to encapsulate state management logic, we had to use higher-order components and render props. For example, we create a React component that uses contexts to deal with user authentication as follows:
import authenticateUser, { AuthenticationContext } from './auth'
const App = () => (
<AuthenticationContext.Consumer>
{user =>
user ? `${user} logged in` : 'not logged in'
Here, we used two JavaScript concepts:
}
</AuthenticationContext.Consumer>
)
export default authenticateUser(App)
In the previous example, we used the higher-order authenticateUser component to add authentication logic to our existing component. We then used AuthenticationContext.Consumer to inject the user object into our component through its render props.
As you can imagine, using many contexts will result in a large tree with many sub-trees, also called wrapper hell. For example, when we want to use three contexts, the wrapper hell looks as follows:
<AuthenticationContext.Consumer>
{user => (
<LanguageContext.Consumer>
{language => (
<StatusContext.Consumer>
{status => (
...
)}
</StatusContext.Consumer>
)}
</LanguageContext.Consumer>
)}
</AuthenticationContext.Consumer>
This is not very easy to read or write, and it is also prone to errors if we need to change something later on. Furthermore, the wrapper hell makes debugging hard, because we need to look at a large component tree, with many components just acting as wrappers.
React Hooks are based on the same fundamental principles as React. They try to encapsulate state management by using existing JavaScript features. As a result, we do not need to learn and understand specialized React features anymore; we can simply tap into our existing JavaScript knowledge in order to use Hooks.
Using Hooks, we can solve all the previously mentioned problems. We do not need to use class components anymore, because Hooks are simply functions that can be called in function components. We also do not need to use higher-order components and render props for contexts anymore, because we can simply use a Context Hook to get the data that we need. Furthermore, Hooks allow us to reuse stateful logic between components, without creating higher-order components.
For example, the aforementioned problems with life cycle methods could be solved using Hooks, as follows:
function Example ({ name }) {
useEffect(() => {
fetch(`http://my.api/${this.props.name}`)
.then(...)
}, [ name ])
// ...
}
The Effect Hook that was implemented here will automatically trigger when the component mounts, and whenever the name prop changes.
Furthermore, the wrapper hell that was mentioned earlier could also be solved using Hooks, as follows:
const user = useContext(AuthenticationContext)
const language = useContext(LanguageContext)
const status = useContext(StatusContext)
Now that we know which problems Hooks can solve, let's get started using Hooks in practice!
As we can see, React Hooks solve many problems, especially of larger web applications. Hooks were added in React 16.8, and they allow us to use state, and various other React features, without writing a class. In this section, we are going to start out by initializing a project with create-react-app, then we will define a class component, and finally we will write the same component as a function component using Hooks. By the end of this section, we will have talked about the advantages of Hooks, and how we would go about migrating to a Hook-based solution.
To initialize a React project, we can use the create-react-app tool, which sets up the environment for React development, including the following:
Furthermore, create-react-app sets up the following:
As we can see, the create-react-app tool makes React development a lot easier for us. It is the perfect tool for us to use in order to learn about React, as well as for deploying React applications in production.
In order to set up a new project, we run the following command, which creates a new directory named <app-name>:
> npx create-react-app <app-name>
We are now going to create a new project using create-react-app. Run the following command to create a new React project for the first example of the first chapter:
> npx create-react-app chapter1_1
Now that we have initialized our project, let's move on to starting the project.
In order to start a project in development mode, we have to run the npm start command. Run the following command:
> npm start
Now, we can access our project by opening http://localhost:3000 in our browser:
As we can see, with create-react-app, it is quite easy to set up a new React project!
To build a project for production deployments, we simply run the build script:
> npm run-script build
> npm install -g serve
> serve -s build
Now, we can access the same app by opening http://localhost:5000 in our browser. Please note that the serve tool does not automatically open the page in your browser.
After learning about create-react-app, we are now going to write our first component with React.
First, we start out with a traditional React class component, which lets us enter a name, which we then display in our app.
As mentioned before, we are going to use create-react-app to initialize our project. If you have not done so already, run the following command now:
> npx create-react-app chapter1_1
Next we are going to define our app as a class component.
We first write our app as a traditional class component, as follows:
import React from 'react'
class MyName extends React.Component {
constructor (props) {
super(props)
this.state = { name: '' }
}
handleChange (evt) {
this.setState({ name: evt.target.value })
}
render () {
const { name } = this.state
The previous statement is the equivalent of doing the following:
const name = this.state.name
return (
<div>
<h1>My name is: {name}</h1>
<input type="text" value={name} onChange={this.handleChange} />
</div>
)
}
}
export default MyName
If we were to run this code now, we would get the following error when entering text, because passing the handler method to onChange changes the this context:
constructor (props) {
super(props)
this.state = { name: '' }
this.handleChange = this.handleChange.bind(this)
}
Finally, our component works! As you can see, there is a lot of code required to get state handling to work properly with class components. We also had to rebind the this context, because otherwise our handler method would not work. This is not very intuitive, and is easy to miss while developing, resulting in an annoying developer experience.
The example code can be found in the Chapter01/chapter1_1 folder.
Just run npm install in order to install all dependencies, and npm start to start the application; then visit http://localhost:3000 in your browser (if it did not open automatically).
After using a traditional class component to write our app, we are going to write the same app using Hooks. As before, our app is going to let us enter a name, which we then display in our app.
We now start by setting up the project.
Again, we use create-react-app to set up our project:
> npx create-react-app chapter1_2
Let's get started with defining a function component using Hooks now.
Now, we define the same component as a function component:
import React, { useState } from 'react'
function MyName () {
The next step would be to get the name variable from the component state. However, we cannot use this.state in function components. We have already learned that Hooks are just JavaScript functions, but what does that really mean? It means that we can simply use Hooks from function components, just like any other JavaScript function!
To use state via Hooks, we call useState() with our initial state as the argument. This function returns an array with two elements:
const [ name, setName ] = useState('')
The previous code is equivalent to the following:
const nameHook = useState('')
const name = nameHook[0]
const setName = nameHook[1]
function handleChange (evt) {
setName(evt.target.value)
}
return (
<div>
<h1>My name is: {name}</h1>
<input type="text" value={name} onChange={handleChange} />
</div>
)
}
export default MyName
And that's it—we have successfully used Hooks for the first time! As you can see, the useState Hook is a drop-in replacement for this.state and this.setState.
Let's run our app by executing npm start, and opening http://localhost:3000 in our browser:
After implementing the same app with a class component and a function component, let's compare the solutions.
The example code can be found in the Chapter01/chapter1_2 folder.
Just run npm install in order to install all dependencies, and npm start to start the application; then visit http://localhost:3000 in your browser (if it did not open automatically).
Let's compare our two solutions, in order to see the differences between class components, and function components using Hooks.
The class component makes use of the constructor method in order to define state, and needs to rebind this in order to pass the handler method to the input field. The full class component code looks as follows:
import React from 'react'
class MyName extends React.Component {
constructor (props) {
super(props)
this.state = { name: '' }
this.handleChange = this.handleChange.bind(this)
}
handleChange (evt) {
this.setState({ name: evt.target.value })
}
render () {
const { name } = this.state
return (
<div>
<h1>My name is: {name}</h1>
<input type="text" value={name} onChange={this.handleChange} />
</div>
)
}
}
export default MyName
As we can see, the class component needs a lot of boilerplate code to initialize the state object and handler functions.
Now, let's take a look at the function component.
The function component makes use of the useState Hook instead, so we do not need to deal with this or a constructor method. The full function component code looks as follows:
import React, { useState } from 'react'
function MyName () {
const [ name, setName ] = useState('')
function handleChange (evt) {
setName(evt.target.value)
}
return (
<div>
<h1>My name is: {name}</h1>
<input type="text" value={name} onChange={handleChange} />
</div>
)
}
export default MyName
As we can see, Hooks make our code much more concise and easier to reason about. We do not need to worry about how things work internally anymore; we can simply use state, by accessing the useState function!
Let's remind ourselves about the first principle of React:
As we have learned in this chapter, Hooks allow us to write code that tells React what we want. With class components, however, we need to tell React how to do things. As a result, Hooks are much more declarative than class components, making them a better fit in the React ecosystem.
Hooks being declarative also means that React can do various optimizations on our code, since it is easier to analyze functions and function calls rather than classes and their complex this behavior. Furthermore, Hooks make it easier to abstract and share common stateful logic between components. By using Hooks, we can avoid render props and higher-order components.
We can see that Hooks not only make our code more concise, and are easier to reason about for developers, but they also make the code easier to optimize for React.
Now, you might be wondering: does that mean class components are deprecated, and we need to migrate everything to Hooks now? Of course not—Hooks are completely opt-in. You can try Hooks in some of your components without rewriting any of your other code. The React team also does not plan on removing class components at the moment.
There is no rush to migrate everything to Hooks right now. It is recommended that you gradually adopt Hooks in certain components where they will be most useful. For example, if you have many components that deal with similar logic, you can extract the logic to a Hook. You can also use function components with Hooks side by side with class components.
Furthermore, Hooks are 100% backward-compatible, and provide a direct API to all the React concepts that you already know about: props, state, context, refs, and life cycle. Furthermore, Hooks offer new ways to combine these concepts and encapsulate their logic in a much better way that does not lead to wrapper hell or similar problems. We are going to learn more about this later in the book.
The main goal of Hooks is to decouple stateful logic from rendering logic. They allow us to define logic in separate functions and reuse them across multiple components. With Hooks, we do not need to change our component hierarchy in order to implement stateful logic. There is no need to define a separate component that provides the state logic to multiple components anymore, we can simply use a Hook instead!
However, Hooks require a completely different mindset from classic React development. We should not think about the life cycle of components anymore. Instead, we should think about data flow. For example, we can tell Hooks to trigger when certain props or values from other Hooks change. We are going to learn more about this concept in Chapter 4, Using the Reducer and Effect Hooks. We should also not split components based on life cycle anymore. Instead, we can use Hooks to deal with common functionalities, such as fetching data, or setting up a subscription.
Hooks are very flexible. However, there are certain limitations to using Hooks, which we should always keep in mind:
We are going to discuss these limitations in more detail, as well as how to work around them, throughout this book.
As we learned in the previous section, Hooks provide a direct API to all React concepts. Furthermore, we can define our own Hooks in order to encapsulate logic without having to write a higher-order component, which causes a wrapper hell. In this section, we are going to give an overview of various Hooks, which we are going to learn about throughout the book.
React already provides various Hooks for different functionalities. There are three basic Hooks, and a handful of additional Hooks.
Basic Hooks provide the most commonly needed functionalities in stateful React apps. They are as follows:
Let's take a look at each of these in the following sections.
We have already used this Hook. It returns a stateful value (state) and a setter function (setState) in order to update the value.
The useState Hook is used to deal with state in React. We can use it as follows:
import { useState } from 'react'
const [ state, setState ] = useState(initialState)
The useState Hook replaces this.state and this.setState().
This Hook works similarly to adding a function on componentDidMount and componentDidUpdate. Furthermore, the Effect Hook allows for returning a cleanup function from it, which works similarly to adding a function to componentWillUnmount.
The useEffect Hook is used to deal with effectful code, such as timers, subscriptions, requests, and so on. We can use it as follows:
import { useEffect } from 'react'
useEffect(didUpdate)
The useEffect Hook replaces the componentDidMount, componentDidUpdate, and componentWillUnmount methods.
This Hook accepts a context object and returns the current context value.
The useContext Hook is used to deal with context in React. We can use it as follows:
import { useContext } from 'react'
const value = useContext(MyContext)
The useContext Hook replaces context consumers.
Additional Hooks are either more generic variants of basic Hooks or are needed for certain edge cases. The additional Hooks we are going to look at are as follows:
Let's dive deeper into these additional Hooks in the following sections.
This Hook returns a mutable ref object, where the .current property is initialized to the passed argument (initialValue). We can use it as follows:
import { useRef } from 'react'
const refContainer = useRef(initialValue)
The useRef Hook is used to deal with references to elements and components in React. We can set a reference by passing the ref prop to an element or a component, as follows: <ComponentName ref={refContainer} />
This Hook is an alternative to useState, and works similarly to the Redux library. We can use it as follows:
import { useReducer } from 'react'
const [ state, dispatch ] = useReducer(reducer, initialArg, init)
The useReducer Hook is used to deal with complex state logic.
Memoization is an optimization technique where the result of a function call is cached, and is then returned when the same input occurs again. The useMemo Hook allows us to compute a value and memoize it. We can use it as follows:
import { useMemo } from 'react'
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
The useMemo Hook is useful for optimization when we want to avoid re-executing expensive operations.
This Hook allows us to pass an inline callback function, and an array of dependencies, and will return a memoized version of the callback function. We can use it as follows:
import { useCallback } from 'react'
const memoizedCallback = useCallback(
() => {
doSomething(a, b)
},
[a, b]
)
The useCallback Hook is useful when passing callbacks to optimized child components. It works similarly to the useMemo Hook, but for callback functions.
This Hook is identical to useEffect, but it only fires after all Document Object Model (DOM) mutations. We can use it as follows:
import { useLayoutEffect } from 'react'
useLayoutEffect(didUpdate)
The useLayoutEffect Hook can be used to read information from the DOM.
Finally, we are going to take a look at the last Hook provided by React at the time of writing.
This Hook can be used to display a label in React DevTools when creating custom Hooks. We can use it as follows:
import { useDebugValue } from 'react'
useDebugValue(value)
Make sure to use this Hook in custom Hooks to display the current state of your Hooks, as it will make it easier to debug them.
In addition to all the Hooks that React provides, there are already plenty of libraries that have been published by the community. These libraries also provide Hooks. The Hooks we are going to look into are as follows:
Let's see an overview of what these Hooks are in the following sections.
This Hook is used to easily implement input handling, and to synchronize the state of an input field with a variable. It can be used as follows:
import { useInput } from 'react-hookedup'
function App () {
const { value, onChange } = useInput('')
return <input value={value} onChange={onChange} />
}
As we can see, Hooks greatly simplify dealing with input fields in React.
This Hook can be used to implement asynchronous data loading via requests in our application. We can use it as follows:
import { useRequest } from 'react-request-hook'
const [profile, getProfile] = useResource(id => ({ url: `/user/${id}`, method: 'GET' })
As we can see, using a special Hook for dealing with fetching data is quite simple.
These Hooks are part of the Navi library, and are used to implement routing via Hooks in React. The Navi library provides many more routing-related Hooks. We are going to learn about routing via Hooks, in depth, later on in the book. We can use them as follows:
import { useCurrentRoute, useNavigation } from 'react-navi'
const { views, url, data, status } = useCurrentRoute()
const { navigate } = useNavigation()
As we can see, Hooks make routing much easier to deal with.
The react-hookedup library provides various Hooks, including all life cycle listeners for React.
Here, we list two of them, but the library actually provides many more Hooks, which we will learn about later on. We can use the Hooks provided by react-hookedup as follows:
import { useOnMount, useOnUnmount } from 'react-hookedup'
useOnMount(() => { ... })
useOnUnmount(() => { ... })
As we can see, Hooks can directly replace life cycle methods in class components.
The react-hookedup library also provides Hooks for setInterval and setTimeout. These work similarly to calling setTimeout or setInterval directly, but as a React Hook, which will persist between re-renders. If we directly defined timers in our function component without Hooks, we would be resetting the timer every time the component re-renders.
We can pass the time in milliseconds as a second argument. We can use them as follows:
import { useInterval, useTimeout } from 'react-hookedup'
useInterval(() => { ... }, 1000)
useTimeout(() => { ... }, 1000)
As we can see, Hooks greatly simplify how we deal with intervals and timeouts in React.
As you can imagine, there are many more Hooks that are provided by the community. We will learn about the previously mentioned community Hooks in depth, and various other community Hooks in Chapter 8: Using Community Hooks.
In this first chapter of the book, we started out by learning the fundamental principles of React and which types of components it provides. We then moved on to learning about common problems with class components, and using existing features of React, and how they break the fundamental principles. Next, we implemented a simple application using class components and function components with Hooks, in order to be able to compare the differences between the two solutions. As we found out, function components with Hooks are a much better fit for React's fundamental principles, as they do not suffer from the same problems as class components, and they make our code much more
concise and easy to understand! Finally, we got our first glimpse of the various Hooks that we are going to learn about throughout this book. After this chapter, the basics of React and React Hooks are clear. We can now move on to more advanced concepts of Hooks.
In the next chapter, we are going to gain an in-depth knowledge of how the State Hook works, by reimplementing it from scratch. By doing so, we are going to get a grasp on how Hooks work internally, and what their limitations are. Afterward, we are going to create a small blog application using the State Hook!
To recap what we have learned in this chapter, try answering the following questions:
If you are interested in more information about the concepts that we have learned in this chapter, take a look at the following reading material:
Now that you've learned about the principles of React and had an introduction to Hooks, we are going to learn about the State Hook in depth. We will start by learning how the State Hook works internally by reimplementing it ourselves. Next, we learn about some of the limitations of Hooks, and why they exist. Then, we will learn about possible alternative Hook APIs and their associated problems. Finally, we learn how to solve the common problems that result from the limitations of Hooks. By the end of this chapter, we will know how to use the State Hook in order to implement stateful function components in React.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found in the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter02.
Check out the following video to see the code in action:
Now, let's get started with the chapter.
In order to get a better understanding of how Hooks work internally, we are going to reimplement the useState Hook from scratch. However, we are not going to implement it as an actual React Hook, but as a simple JavaScript function—just to get an idea of what Hooks are actually doing.
We are now going to start reimplementing the State Hook:
import React, { useState } from 'react'
Replace it with these lines of code:
import React from 'react'
import ReactDOM from 'react-dom'
function useState (initialState) {
let value = initialState
function setState (nextValue) {
value = nextValue
ReactDOM.render(<MyName />, document.getElementById('root'))
}
return [ value, setState ]
}
The reason why we use an array, and not an object, is that we usually want to rename the value and setState variables. Using an array makes it easy to rename the variables through destructuring:
const [ name, setName ] = useState('')
As we can see, Hooks are simple JavaScript functions that deal with side effects, such as setting a stateful value.
Our Hook function uses a closure to store the current value. The closure is an environment where variables exist and are stored. In our case, the function provides the closure, and the value variable is stored within that closure. The setState function is also defined within the same closure, which is why we can access the value variable within that function. Outside of the useState function, we cannot directly access the value variable unless we return it from the function.
If we run our Hook implementation now, we are going to notice that when our component rerenders, the state gets reset, so we cannot enter any text in the field. This is due to the reinitialization of the value variable every time our component gets rendered, which happens because we call useState each time we render the component.
In the upcoming sections, we are going to solve this problem by using a global variable and then turn the simple value into an array, allowing us to define multiple Hooks.
As we have learned, the value is stored within the closure that is defined by the useState function. Every time the component rerenders, the closure is reinitialized, which means that our value will be reset. To solve this, we need to store the value in a global variable, outside of the function. That way, the value variable will be in the closure outside of the function, which means that when the function gets called again, the closure will not be reinitialized.
We can define a global variable as follows:
let value
function useState (initialState) {
if (typeof value === 'undefined') value = initialState
Now, our useState function uses the global value variable, instead of defining the value variable within its closure, so it will not be reinitialized when the function gets called again.
Our Hook function works! However, if we wanted to add another Hook, we would run into another problem: all the Hooks write to the same global value variable!
Let's take a closer look at this problem by adding a second Hook to our component.
Let's say we want to create a second field for the last name of the user, as follows:
const [ name, setName ] = useState('')
const [ lastName, setLastName ] = useState('')
function handleLastNameChange (evt) {
setLastName(evt.target.value)
}
<h1>My name is: {name} {lastName}</h1>
<input type="text" value={lastName} onChange={handleLastNameChange}
/>
When we try this out, we are going to notice that our reimplemented Hook function uses the same value for both states, so we are always changing both fields at once.
In order to implement multiple Hooks, instead of having a single global variable, we should have an array of Hook values.
We are now going to refactor the value variable to a values array so that we can define multiple Hooks:
let value
Replace it with the following code snippet:
let values = []
let currentHook = 0
if (typeof values[currentHook] === 'undefined') values[currentHook] = initialState
let hookIndex = currentHook
function setState (nextValue) {
values[hookIndex] = nextValue
ReactDOM.render(<MyName />, document.getElementById('root'))
}
return [ values[currentHook++], setState ]
Using values[currentHook++], we pass the current value of currentHook as an index to the values array, and then increase currentHook by one. This means that currentHook will be increased after returning from the function.
function Name () {
currentHook = 0
Finally, our simple reimplementation of the useState Hook works! The following screenshot highlights this:
As we can see, using a global array to store our Hook values solved the problems that we had when defining multiple Hooks.
The example code for the simple Hook reimplementation can be found in the Chapter02/chapter2_1 folder.
Just run npm install in order to install all the dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it did not open automatically).
What if we wanted to add a checkbox that toggles the use of the first name field?
Let's find out by implementing such a checkbox:
const [ enableFirstName, setEnableFirstName ] = useState(false)
function handleEnableChange (evt) {
setEnableFirstName(!enableFirstName)
}
<input type="checkbox" value={enableFirstName} onChange={handleEnableChange} />
<h1>My name is: {enableFirstName ? name : ''} {lastName}</h1>
const [ name, setName ] = enableFirstName
? useState('')
: [ '', () => {} ]
> npm install --save react-scripts@^2.1.8
Here, we either use the Hook, or if the first name is disabled, we return the initial state and an empty setter function so that editing the input field will not work.
If we now try out this code, we are going to notice that editing the last name still works, but editing the first name does not work, which is what we wanted. As we can see in the following screenshot, only editing the last name works now:
When we click the checkbox, something strange happens:
We can see the result of clicking the checkbox in the following screenshot:
We can see that the last name state is now in the first name field. The values have been swapped because the order of Hooks matters. As we know from our implementation, we use the currentHook index in order to know where the state of each Hook is stored. However, when we insert an additional Hook in-between two existing Hooks, the order gets messed up.
Before checking the checkbox, the values array was as follows:
Then, we entered some text in the lastName field:
Next, we toggled the checkbox, which activated our new Hook:
As we can see, inserting a new Hook in-between two existing Hooks makes the name Hook steal the state from the next Hook (lastName) because it now has the same index that the lastName Hook previously had. Now, the lastName Hook does not have a value, which causes it to set the initial value (an empty string). As a result, toggling the checkbox puts the value of the lastName field into the name field.
The example code for the problem of the conditional Hook of our simple Hook reimplementation can be found in the Chapter02/chapter2_2 folder.
Just run npm install in order to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it did not open automatically).
Our simple Hook implementation already gives us an idea about how Hooks work internally. However, in reality, Hooks do not use global variables. Instead, they store state within the React component. They also deal with the Hook counter internally, so we do not need to manually reset the count in our function component. Furthermore, real Hooks automatically trigger rerenders of our component when the state changes. To be able to do this, however, Hooks need to be called from a React function component. React Hooks cannot be called outside of React, or inside React class components.
By reimplementing the useState Hook, we have learned a couple things:
The last point is especially important because it means that we cannot conditionally define Hooks. We should always have all the Hook definitions at the beginning of our function component, and never nest them within if or other constructs.
Here we have also learned the following:
We are now going to look at alternative Hook APIs that allow conditional Hooks.
Sometimes, it would be nice to define Hooks conditionally or in loops, but why did the React team decide to implement Hooks like this? What are the alternatives? Let's go through a few of them.
We could give each Hook a name and then store the Hooks in an object instead of an array. However, this would not make for a nice API, and we would also always have to think of coming up with unique names for Hooks:
// NOTE: Not the actual React Hook API
const [ name, setName ] = useState('nameHook', '')
Furthermore, what would happen when the conditional is set to false, or an item is removed from the loop? Would we clear the Hook state? If we do not clear the Hook state, we might be causing memory leaks.
Even if we solved all these problems, there would still be the problem of name collisions. If we, for example, create a custom Hook that makes use of the useState Hook, and call it nameHook, then we cannot call any other Hook nameHook in our component anymore, or we will cause a name collision. This is even the case for Hook names from libraries, so we need to make sure we avoid name collisions with Hooks that have been defined by libraries as well!
Alternatively, we could also create a Hook factory function, which uses Symbol internally, in order to give each Hook a unique key name:
function createUseState () {
const keyName = Symbol()
return function useState () {
// ... use unique key name to handle hook state ...
}
}
Then, we could use the factory function as follows:
// NOTE: Not the actual React Hook API
const useNameState = createUseState()
function MyName () {
const [ name, setName ] = useNameState('')
// ...
}
However, this means that we will need to instantiate each Hook twice: once outside of our component and once inside the function component. This creates more room for errors. For example, if we create two Hooks and copy and paste the boilerplate code, then we might make a mistake in the name of our Hook resulting from the factory function, or we might make a mistake when using the Hook inside the component.
This approach also makes it much harder to create custom Hooks, which forces us to write wrapper functions. Furthermore, it is harder to debug these wrapped functions than it is to debug a simple function.
There were many proposed alternative APIs for React Hooks, but each of them suffered from similar problems: either making the API harder to use, harder to debug, or introducing the possibility of name collisions.
In the end, the React team decided that the simplest API was to keep track of Hooks by counting the order in which they are called. This approach comes with its own downsides, such as not being able to call Hooks conditionally or in loops. However, this approach makes it very easy for us to create custom Hooks, and it is simple to use and debug. We also do not need to worry about naming Hooks, name collisions, or writing wrapper functions. The final approach for Hooks lets us use Hooks just like any other function!
As we found out, implementing Hooks with the official API also has its own trade-offs and limitations. We are now going to learn how to overcome these common problems, which stem from the limitations of React Hooks.
We will take a look at solutions that can be used to overcome these two problems:
So, how do we implement conditional Hooks? Instead of making the Hook conditional, we can always define the Hook and use it whenever we need it. If this is not an option, we need to split up our components, which is usually better anyway!
For simple cases, such as the first and last name example that we had previously, we can just always keep the Hook defined, as follows:
const [ name, setName ] = useState('')
Always defining the Hook is usually a good solution for simple cases.
Another way to solve conditional Hooks is to split up one component into multiple components and then conditionally render the components. For example, let's say we want to fetch user information from a database after the user logs in.
We cannot do the following, as using an if conditional could change the order of the Hooks:
function UserInfo ({ username }) {
if (username) {
const info = useFetchUserInfo(username)
return <div>{info}</div>
}
return <div>Not logged in</div>
}
Instead, we have to create a separate component for when the user is logged in, as follows:
function LoggedInUserInfo ({ username }) {
const info = useFetchUserInfo(username)
return <div>{info}</div>
}
function UserInfo ({ username }) {
if (username) {
return <LoggedInUserInfo username={username} />
}
return <div>Not logged in</div>
}
Using two separate components for the non-logged in and logged in state makes sense anyway, because we want to stick to the principle of having one functionality per component. So, usually, not being able to have conditional Hooks is not much of a limitation if we stick to best practices.
As for Hooks in loops, we can either use a single State Hook containing an array, or we can split up our components. For example, let's say we want to display all the users that are online.
We could simply use an array that contains all users, as follows:
function OnlineUsers ({ users }) {
const [ userInfos, setUserInfos ] = useState([])
// ... fetch & keep userInfos up to date ...
return (
<div>
{users.map(username => {
const user = userInfos.find(u => u.username === username)
return <UserInfo {...user} />
})}
</div>
)
}
However, this might not always make sense. For example, we might not want to update the user state through the OnlineUsers component because we would have to select the correct user state from the array, and then modify the array. This might work, but it is quite tedious.
A better solution would be to use the Hook in the UserInfo component instead. That way, we can keep the state for each user up to date, without having to deal with array logic:
function OnlineUsers ({ users }) {
return (
<div>
{users.map(username => <UserInfo username={username} />)}
</div>
)
}
function UserInfo ({ username }) {
const info = useFetchUserInfo(username)
// ... keep user info up to date ...
return <div>{info}</div>
}
As we can see, using one component for each functionality keeps our code simple and concise, and also avoids the limitations of React Hooks.
Now that we have learned about the different alternatives to conditional Hooks, we are going to solve the problem that we had in our small example project earlier. The simplest solution to this problem would be to always define the Hook, instead of conditionally defining it. In a simple project like this one, always defining the Hook makes the most sense.
Edit src/App.js and remove the following conditional Hook:
const [ name, setName ] = enableFirstName
? useState('')
: [ '', () => {} ]
Replace it with a normal Hook, such as the following:
const [ name, setName ] = useState('')
Now, our example works fine! In more complex cases, it might not be feasible to always define the Hook. In that case, we would need to create a new component, define the Hook there, and then conditionally render the component.
The example code for the simple solution to the conditional Hooks problem can be found in the Chapter02/chapter2_3 folder.
Just run npm install in order to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it did not open automatically).
In this chapter, we started out by reimplementing the useState function, by making use of global state and closures. We then learned that in order to implement multiple Hooks, we need to use a state array instead. By using a state array, however, we were forced to keep the order of Hooks consistent across function calls. This limitation made conditional Hooks and Hooks in loops impossible. We then learned about possible alternatives to the Hook API, their trade-offs, and why the final API was chosen. Finally, we learned how to solve the common problems that stem from the limitations of Hooks. We now have a solid understanding of the inner workings and limitations of Hooks. Furthermore, we learned about the State Hook in depth.
In the next chapter, we are going to create a blog application using the State Hook, and learn how to combine multiple Hooks.
To recap what we have learned in this chapter, try to answer the following questions:
If you are interested in finding out more about the concepts that we have learned in this chapter, take a look at the following reading material:
After learning about the State Hook in depth, we are now going to make use of it by creating a blog application from scratch. Throughout this chapter, we are going to learn how to structure React apps in a way that scales well, how to use multiple Hooks, where to store state, and how to solve common use cases with Hooks. At the end of this chapter, we are going to have a basic blog application, where we can log in, register, and create posts.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found in the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter03.
Check out the following video to see the code in action:
Now, let's get started with the chapter.
After learning about the principles of React, how to use the useState Hook, and how Hooks work internally, we are now going to make use of the real useState Hook in order to develop a blog application. First, we are going to create a new project, and structure the folders in a way that will allow us to scale the project later on. Then, we are going to define the components that we are going to need in order to cover the basic features of a blog application. Finally, we are going to use Hooks to introduce state to our application! Throughout this chapter, we are also going to learn about JSX, and new JavaScript features that have been introduced in ES6, up to ES2018.
There are many ways that projects can be structured, and different structures can do well for different projects. Usually, we create a src/ folder, and group our files there by features. Another popular way to structure projects is to group them by routes. For some projects, it might make sense to additionally separate by the kind of code, such as src/api/ and src/components/. However, for our project, we are mainly going to focus on the user interface (UI). As a result, we are going to group our files by features in the src/ folder.
We first have to think about which features we are going to implement in our blog application. At the bare minimum, we want to implement the following features:
Now that we have chosen the features, let's come up with an initial folder structure.
From our previous functionalities, we can abstract a couple of feature groups:
We could now just keep it very simple, and create all of the components in the src/ folder, without any nesting. However, since we already have quite a clear picture on the features that a blog application is going to need, we can come up with a simple folder structure now:
After defining the folder structure, we can move on to the component structure.
The idea of components in React is to have each component deal with a single task or UI element. We should try to make components as fine-grained as possible, in order to be able to reuse code. If we find ourselves copying and pasting code from one component to another, it might be a good idea to create a new component, and reuse it in multiple other components.
Usually, when developing software, we start with a UI mock-up. For our blog application, a mock-up would look as follows:
When splitting components, we use the single responsibility principle, which states that every module should have responsibility over a single encapsulated part of the functionality.
In this mock-up, we can draw boxes around each component and subcomponent, and give them names. Keep in mind that each component should have exactly one responsibility. We start with the fundamental components that make up this app:
We defined a Logout component for the logout feature, a CreatePost component, which contains the form to create a new post, and a Post component to display the actual posts.
Now that we have defined our fundamental components, we are going to look at which components logically belong together, thereby forming a group. To do so, we now define the container components, which we need in order to group the components together:
We defined a PostList component in order to group posts together, then a UserBar component in order to deal with login/logout and registration. Finally, we defined an App component in order to group everything together, and define the structure of our app.
Now that we are done with structuring our React project, we can move on to implementing the static components.
Before we start adding state via Hooks to our blog application, we are going to model the basic features of our application as static React components. Doing this means that we have to deal with the static view structure of our application.
It makes sense to deal with the static structure first, so as to avoid having to move dynamic code to different components later on. Furthermore, it is easier to deal only with Hypertext Markup Language (HTML) and CSS first—helping us to get started with projects quickly. Then, we can move on to implementing dynamic code and handling state.
Doing this step by step, instead of implementing everything at once, helps us to quickly get started with new projects without having to think about too much at once, and lets us avoid having to restructure projects later!
We have already learned how to set up a new React project. As we have learned, we can use the create-react-app tool to easily initialize a new project. We are going to do so now:
> npx create-react-app chapter3_1
Now that our project structure is set up, we can start implementing components.
We are going to start with the simplest feature in terms of static components: implementing user-related functionality. As we have seen from our mock-up, we are going to need four components here:
We are going to start by defining the first three components, which are all stand-alone components. Lastly, we will define the UserBar component, because it depends on the other components being defined.
First, we define the Login component, where we show two fields: a Username field, and a Password field. Furthermore, we show a Login button:
import React from 'react'
export default function Login () {
return (
<form onSubmit={e => e.preventDefault()}>
<label htmlFor="login-username">Username:</label>
<input type="text" name="login-username" id="login-username" />
<label htmlFor="login-password">Password:</label>
<input type="password" name="login-password" id="login-password" />
<input type="submit" value="Login" />
</form>
)
}
Here, we are using an anonymous function to define the onSubmit handler. Anonymous functions are defined as follows, if they do not have any arguments: () => { ... }, instead of function () { ... }. With arguments, we could write (arg1, arg2) => { ... }, instead of function (arg1, arg2) { ... }. We can omit the () brackets if we only have a single argument. Additionally, we can omit the {} brackets if we only have a single statement in our function, like this: e => e.preventDefault().
Our Login component is implemented, and is now ready to be tested.
Now that we have defined our first component, let's render it and see what it looks like:
import React from 'react'
import Login from './user/Login'
export default function App () {
return <Login />
}
As we can see, the static Login component renders fine in React. We can now move on to the Logout component.
Next, we define the Logout component, which is going to display the currently logged in user, and a button to log out:
import React from 'react'
export default function Logout ({ user }) {
return (
<form onSubmit={e => e.preventDefault()}>
Logged in as: <b>{user}</b>
<input type="submit" value="Logout" />
</form>
)
}
import React from 'react'
import Logout from './user/Logout'
export default function App () {
return <Logout user="Daniel Bugl" />
}
Now, the Logout component is defined, and we can move on to the Register component.
The static Register component will be very similar to the Login component, with an additional field to repeat the password. You might get the idea to merge them into one component if they are so similar, and add a prop to toggle the Repeat password field. However, it is best to stick to the single responsibility principle, and to have each component deal with only one functionality. Later on, we are going to extend the static components with dynamic code, and then Register and Login will have vastly different code. As a result, we would need to split them up again later.
Nevertheless, let's start working on the code for the Register component:
import React from 'react'
export default function Register () {
return (
<form onSubmit={e => e.preventDefault()}>
<label htmlFor="register-username">Username:</label>
<input type="text" name="register-username" id="register-username" />
<label htmlFor="register-password">Password:</label>
<input type="password" name="register-password" id="register-password" />
<label htmlFor="register-password-repeat">Repeat password:</label>
<input type="password" name="register-password-repeat" id="register-password-repeat" />
<input type="submit" value="Register" />
</form>
)
}
import React from 'react'
import Register from './user/Register'
export default function App () {
return <Register />
}
As we can see, our Register component looks very similar to the Login component.
Now it is time to put our user-related components together into a UserBar component. Here we are going to conditionally show either the Login and Register components, or the Logout component, depending on whether the user is already logged in or not.
Let's start implementing the UserBar component:
import React from 'react'
import Login from './Login'
import Logout from './Logout'
import Register from './Register'
export default function UserBar () {
const user = ''
if (user) {
return <Logout user={user} />
} else {
return (
<React.Fragment>
<Login />
<Register />
</React.Fragment>
)
}
}
import React from 'react'
import UserBar from './user/UserBar'
export default function App () {
return <UserBar />
}
const user = 'Daniel Bugl'
Later on in this chapter, we are going to add Hooks to our application, so that we can log in and have the state change dynamically without having to edit the code!
The example code for the user-related components can be found in the Chapter03/chapter3_1 folder.
Just run npm install to install all dependencies, and npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
After implementing all the user-related components, we move on to implementing posts in our blog app. We are going to define the following components:
Let's get started implementing the post related components now.
We have already thought about which elements a post has when creating the mock-up. A post should have a title, content, and an author (the user who wrote the post).
Let's implement the Post component now:
import React from 'react'
export default function Post ({ title, content, author }) {
return (
<div>
<h3>{title}</h3>
<div>{content}</div>
<br />
<i>Written by <b>{author}</b></i>
</div>
)
}
import React from 'react'
import Post from './post/Post'
export default function App () {
return <Post title="React Hooks" content="The greatest thing since sliced bread!" author="Daniel Bugl" />
}
Now, the static Post component has been implemented, and we can move on to the CreatePost component.
Next, we implement a form to allow for the creation of new posts. Here, we pass the user value as a prop to the component, as the author should always be the currently logged-in user. Then, we show the author, and provide an input field for the title, and a <textarea> element for the content of the blog post.
Let's implement the CreatePost component now:
import React from 'react'
export default function CreatePost ({ user }) {
return (
<form onSubmit={e => e.preventDefault()}>
<div>Author: <b>{user}</b></div>
<div>
<label htmlFor="create-title">Title:</label>
<input type="text" name="create-title" id="create-title" />
</div>
<textarea />
<input type="submit" value="Create" />
</form>
)
}
import React from 'react'
import CreatePost from './post/CreatePost'
export default function App () {
return <CreatePost />
}
As we can see, the CreatePost component renders fine. We can now move on to the PostList component.
After implementing the other post-related components, we can now implement the most important part of our blog app: the feed of blog posts. For now, the feed is simply going to show a list of blog posts.
Let's start implementing the PostList component now:
import React from 'react'
import Post from './Post'
export default function PostList ({ posts = [] }) {
return (
<div>
{posts.map((p, i) => <Post {...p} key={'post-' + i} />)}
</div>
)
}
Here, we use the map function, which applies a function to all the elements of an array. This is similar to using a for loop, and storing all the results, but it is much more concise, declarative, and easier to read! Alternatively, we could do the following instead of using the map function:
let renderedPosts = []
let i = 0
for (let p of posts) {
renderedPosts.push(<Post {...p} key={'post-' + i} />)
i++
}
return (
<div>
{renderedPosts}
</div>
)
We then return the <Post> component for each post, and pass all the keys from the post object, p, to the component as props. We do this by using the spread syntax, which has the same effect as listing all the keys from the object manually as props, as follows: <Post title={p.title} content={p.content} author={p.author} />
{posts.map((p, i) => (
<React.Fragment key={'post-' + i} >
<Post {...p} />
<hr />
</React.Fragment>
))}
import React from 'react'
import PostList from './post/PostList'
const posts = [
{ title: 'React Hooks', content: 'The greatest thing since sliced bread!', author: 'Daniel Bugl' },
{ title: 'Using React Fragments', content: 'Keeping the DOM tree clean!', author: 'Daniel Bugl' }
]
export default function App () {
return <PostList posts={posts} />
}
Now, we can see that our app lists all the posts that we defined in the posts array:
As we can see, listing multiple posts via the PostList component works fine. We can now move on to putting the app together.
After implementing all components, in order to reproduce the mock-up, we now only have to put everything together in the App component. Then, we will have successfully reproduced the mock-up!
Let's start modifying the App component, and putting our app together:
import React from 'react'
import PostList from './post/PostList'
import CreatePost from './post/CreatePost'
import UserBar from './user/UserBar'
const user = 'Daniel Bugl'
const posts = [
{ title: 'React Hooks', content: 'The greatest thing since sliced bread!', author: 'Daniel Bugl' },
{ title: 'Using React Fragments', content: 'Keeping the DOM tree clean!', author: 'Daniel Bugl' }
]
export default function App () {
return (
<div style={{ padding: 8 }}>
<UserBar />
<br />
<CreatePost user={user} />
<br />
<hr />
<PostList posts={posts} />
</div>
)
}
As we can see, all of the static components that we defined earlier are rendered together in one App component. Our app now looks just like the mock-up. Next, we can move on to making all of the components dynamic.
The example code for the static implementation of our blog app can be found in the Chapter03/chapter3_2 folder.
Just run npm install to install all dependencies and npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
Now that we have implemented the static structure of our application, we are going to add useState Hooks to it, in order to be able to handle state and dynamic interactions!
To add Hooks for the users feature, we are going to have to replace the static user value with a State Hook. Then, we need to adjust the value when we log in, register and log out.
Recall that when we created the UserBar component, we statically defined the user value. We are now going to replace this value with a State Hook!
Let's start modifying the UserBar component to make it dynamic:
import React, { useState } from 'react'
const user = 'Daniel Bugl'
Replace it with a State Hook, using an empty user '' as the default value:
const [ user, setUser ] = useState('')
if (user) {
return <Logout user={user} setUser={setUser} />
} else {
return (
<React.Fragment>
<Login setUser={setUser} />
<Register setUser={setUser} />
</React.Fragment>
)
}
Now, the UserBar component provides a setUser function, which can be used in the Login, Register, and Logout components to set or unset the user value.
In the Login and Register components, we need to use the setUser function to set the value of user accordingly, when we log in or register.
In the Login component, we just ignore the Password field for now, and only process the Username field.
Let's start by modifying the Login component in order to make it dynamic:
import React, { useState } from 'react'
export default function Login ({ setUser }) {
const [ username, setUsername ] = useState('')
function handleUsername (evt) {
setUsername(evt.target.value)
}
<input type="text" value={username} onChange={handleUsername} name="login-username" id="login-username" />
<form onSubmit={e => { e.preventDefault(); setUser(username) }} />
<input type="submit" value="Login" disabled={username.length === 0} />
And it works—we can now enter a username, press the Login button, and then our UserBar component will change its state, and show the Logout component!
For registration, we are additionally going to check whether the entered passwords are the same, and only then will we set the user value.
Let's start by modifying the Register component in order to make it dynamic:
import React, { useState } from 'react'
export default function Register ({ setUser }) {
const [ username, setUsername ] = useState('')
function handleUsername (evt) {
setUsername(evt.target.value)
}
return (
<form onSubmit={e => { e.preventDefault(); setUser(username) }}>
<label htmlFor="register-username">Username:</label>
<input type="text" value={username} onChange={handleUsername} name="register-username" id="register-username" />
<label htmlFor="register-password">Password:</label>
<input type="password" name="register-password" id="register-password" />
<label htmlFor="register-password-repeat">Repeat password:</label>
<input type="password" name="register-password-repeat" id="register-password-repeat" />
<input type="submit" value="Register" disabled={username.length === 0} />
</form>
)
}
const [ password, setPassword ] = useState('')
const [ passwordRepeat, setPasswordRepeat ] = useState('')
function handlePassword (evt) {
setPassword(evt.target.value)
}
function handlePasswordRepeat (evt) {
setPasswordRepeat(evt.target.value)
}
<label htmlFor="register-password">Password:</label>
<input type="password" value={password} onChange={handlePassword} name="register-password" id="register-password" />
<label htmlFor="register-password-repeat">Repeat password:</label>
<input type="password" value={passwordRepeat} onChange={handlePasswordRepeat} name="register-password-repeat" id="register-password-repeat" />
<input type="submit" value="Register" disabled={username.length === 0 || password.length === 0 || password !== passwordRepeat} />
And now we have successfully implemented a check on whether the passwords are equal, and we implemented registration!
There is still one thing missing for the users feature—we cannot log out yet.
Let's make the Logout component dynamic now:
export default function Logout ({ user, setUser }) {
<form onSubmit={e => { e.preventDefault(); setUser('') }} />
Now, the Logout component sets the user value to '' when we click on the Logout button.
As you might have noticed, the CreatePost component still uses the hardcoded username. To be able to access the user value there, we need to move the Hook from the UserBar component, to the App component.
Let's refactor the definition of the user State Hook now:
const [ user, setUser ] = useState('')
export default function UserBar ({ user, setUser }) {
import React, { useState } from 'react'
const user = 'Daniel Bugl'
const [ user, setUser ] = useState('')
<UserBar user={user} setUser={setUser} />
{user && <CreatePost user={user} />}
Now, the users feature is fully implemented—we can use the Login and Register components, and the user value also gets passed to the CreatePost component!
After implementing the users feature, we are now going to implement the dynamic creation of posts. We do so by first adjusting the App component and then modifying the CreatePost component, in order to be able to insert new posts.
Let's get started by adjusting the App component.
As we know from the users feature, posts are also going to be global state, so we should define it in the App component.
Let's implement the posts value as global state now:
const defaultPosts = [
{ title: 'React Hooks', content: 'The greatest thing since sliced bread!', author: 'Daniel Bugl' },
{ title: 'Using React Fragments', content: 'Keeping the DOM tree clean!', author: 'Daniel Bugl' }
]
const [ posts, setPosts ] = useState(defaultPosts)
{user && <CreatePost user={user} posts={posts} setPosts={setPosts} />}
Now, our App component provides the posts array, and a setPosts function to the CreatePost component. Let's move on to adjusting the CreatePost component.
Next, we need to use the setPosts function in order to insert a new post, when we press the Create button.
Let's start modifying the CreatePost component in order to make it dynamic:
import React, { useState } from 'react'
export default function CreatePost ({ user, posts, setPosts }) {
const [ title, setTitle ] = useState('')
const [ content, setContent ] = useState('')
function handleTitle (evt) {
setTitle(evt.target.value)
}
function handleContent (evt) {
setContent(evt.target.value)
}
function handleCreate () {
const newPost = { title, content, author: user }
setPosts([ newPost, ...posts ])
}
<div>
<label htmlFor="create-title">Title:</label>
<input type="text" value={title} onChange={handleTitle} name="create-title"
id="create-title" />
</div>
<textarea value={content} onChange={handleContent} />
<form onSubmit={e => { e.preventDefault(); handleCreate() }}>
As we can see, now our application is fully dynamic, and we can use all of its features!
The example code for the dynamic implementation of our blog app with Hooks can be found in the Chapter03/chapter3_3 folder.
Just run npm install to install all dependencies, and npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
In this chapter, we developed our own blog application from scratch! We started with a mock-up, then created static components to resemble it. Afterward, we implemented Hooks, to allow for dynamic behavior. Throughout the chapter, we learned how to deal with local and global states, using Hooks. Furthermore, we learned how to use multiple Hooks, and in which components to define Hooks and store state. We also learned how to solve common use cases, such as handling input fields with the use of Hooks.
In the next chapter, we are going to learn about the useReducer Hook, which allows us to deal with certain state changes more easily. Furthermore, we are going to learn about the useEffect Hook, which allows us to run code with side effects.
To recap what we have learned in this chapter, try to answer the following questions:
If you are interested in more information about the concepts that we have learned in this chapter, take a look at the following reading material:
In this part of the book, we will learn about various React Hooks and how to use them. Additionally, we will learn about the rules of Hooks and how to write our own Hooks.
In this section, we will cover the following chapters:
After developing our own blog application using the State Hook, we are now going to learn about two other very important Hooks that are provided by React: the Reducer and Effect Hooks. We are first going to learn when we should use a Reducer Hook instead of a State Hook. Then, we learn how to turn an existing State Hook into a Reducer Hook in order to get a grasp on the concept in practice. Next, we are going to learn about Effect Hooks and what they are used for. Finally, we are going to implement them in our blog application.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter04.
Check out the following video to see the code in action:
Now, let's get started with the chapter.
In the previous chapter, we learned about dealing with local and global states. We used State Hooks for both cases, which is fine for simple state changes. However, when our state logic becomes more complicated, we are going to need to ensure that we keep the state consistent. In order to do so, we should use a Reducer Hook instead of multiple State Hooks, because it is harder to maintain synchronicity between multiple State Hooks that depend on each other. As an alternative, we could keep all state in one State Hook, but then we have to make sure that we do not accidentally overwrite parts of our state.
The State Hook already supports passing complex objects and arrays to it, and it can handle their state changes perfectly well. However, we are always going to have to change the state directly, which means that we need to use a lot of spread syntax, in order to make sure that we are not overwriting other parts of the state. For example, imagine that we have a state object like this:
const [ config, setConfig ] = useState({ filter: 'all', expandPosts: true })
Now, we want to change the filter:
setConfig({ filter: { byAuthor: 'Daniel Bugl', fromDate: '2019-04-29' } })
If we simply ran the preceding code, we would be removing the expandPosts part of our state! So, we need to do the following:
setConfig({ ...config, filter: { byAuthor: 'Daniel Bugl', fromDate: '2019-04-29' } })
Now, if we wanted to change the fromDate filter to a different date, we would need to use spread syntax twice, to avoid removing the byAuthor filter:
setConfig({ ...config, filter: { ...config.filter, fromDate: '2019-04-30' } })
But, what happens if we do this when the filter state is still a string? We are going to get the following result:
{ filter: { '0': 'a', '1': 'l', '2': 'l', fromDate: '2019-04-30' },
expandPosts: true }
What? Why are there suddenly three new keys—0, 1, and 2? This is because spread syntax also works on strings, which are spread in such a way that each letter gets a key, based on its index in the string.
As you can imagine, using spread syntax and changing the state object directly can become very tedious for larger state objects. Furthermore, we always need to make sure that we do not introduce any bugs, and we need to check for bugs in multiple places all across our app.
Instead of changing the state directly, we could make a function that deals with state changes. Such a function would only allow state changes via certain actions, such as a CHANGE_FILTER or a TOGGLE_EXPAND action.
Actions are simply objects that have a type key, telling us which action we are dealing with, and additional keys more closely describing the action.
The TOGGLE_EXPAND action is quite simple. It is simply an object with the action type defined:
{ type: 'TOGGLE_EXPAND' }
The CHANGE_FILTER action could deal with the complex state changes that we had problems with earlier, as follows:
{ type: 'CHANGE_FILTER', all: true }
{ type: 'CHANGE_FILTER', fromDate: '2019-04-29' }
{ type: 'CHANGE_FILTER', byAuthor: 'Daniel Bugl' }
{ type: 'CHANGE_FILTER', fromDate: '2019-04-30' }
The second, third, and fourth actions would change the filter state from a string to an object, and then set the respective key. If the object already exists, we would simply adjust the keys that were defined in the action. After each action, the state would change as follows:
Now, take a look at the following code:
{ type: 'CHANGE_FILTER', all: true }
If we dispatched another action, as in the preceding code, then the state would go back to being the all string, as it was in the initial state.
Now, we still need to define the function that handles these state changes. Such a function is known as a reducer function. It takes the current state and action as arguments, and returns a new state.
Now, we are going to define our reducer function:
function reducer (state, action) {
switch (action.type) {
case 'TOGGLE_EXPAND':
return { ...state, expandPosts: !state.expandPosts }
case 'CHANGE_FILTER':
if (action.all) {
return { ...state, filter: 'all' }
}
let filter = typeof state.filter === 'object' ? state.filter : {}
if (action.fromDate) {
filter = { ...filter, fromDate: action.fromDate }
}
if (action.byAuthor) {
filter = { ...filter, byAuthor: action.byAuthor }
}
return { ...state, filter }
default:
throw new Error()
}
}
Now, our reducer function has been defined, and we can move on to defining the Reducer Hook.
Now that we have defined actions and the reducer function, we can create a Reducer Hook from the reducer. The signature for the useReducer Hook is as follows:
const [ state, dispatch ] = useReducer(reducer, initialState)
The only thing that we still need to define is the initialState; then we can define a Reducer Hook:
const initialState = { all: true }
Now, we can access the state by using the state object that was returned from the Reducer Hook, and dispatch actions via the dispatch function, as follows:
dispatch({ type: 'TOGGLE_EXPAND' })
If we want to add additional options to the action, we simply add them to the action object:
dispatch({ type: 'CHANGE_FILTER', fromDate: '2019-04-30' })
As we can see, dealing with state changes using actions and reducers is much easier than having to adjust the state object directly.
After learning about actions, reducers, and the Reducer Hook, we are going to implement them in our blog app. Any existing State Hook can be turned into a Reducer Hook, when the state object or state changes become too complex.
Global state is usually a good candidate for using a Reducer Hook, rather than a State Hook, because global-state changes can happen anywhere in the app. Then, it is much easier to deal with actions, and update the state-changing logic only in one place. Having all the state-changing logic in one place makes it easier to maintain and fix bugs, without introducing new ones by forgetting to update the logic everywhere.
We are now going to turn some of the existing State Hooks in our blog app into Reducer Hooks.
In our blog app, we have two global State Hooks, which we are going to replace with Reducer Hooks:
We start by replacing the user State Hook.
We are going to start with the user State Hook, because it is simpler than the posts State Hook. Later on, the user state will contain complex state changes, so it makes sense to use a Reducer Hook here.
First, we are going to define our actions, then we are going to define the reducer function. Finally, we are going to replace the State Hook with a Reducer Hook.
We start by defining our actions, as these will be important when defining the reducer function.
Let's define the actions now:
{ type: 'LOGIN', username: 'Daniel Bugl', password: 'notsosecure' }
{ type: 'REGISTER', username: 'Daniel Bugl', password: 'notsosecure', passwordRepeat: 'notsosecure' }
{ type: 'LOGOUT' }
Now, we have defined all the required user-related actions and we can move on to defining the reducer function.
Next, we define a reducer function for the user state. For now, we are going to place our reducers in the src/App.js file.
Let's start defining the userReducer function:
function userReducer (state, action) {
switch (action.type) {
case 'LOGIN':
case 'REGISTER':
return action.username
case 'LOGOUT':
return ''
default:
throw new Error()
}
}
Now, the userReducer function is defined, and we can move on to defining the Reducer Hook.
After defining the actions and the reducer function, we are going to define the Reducer Hook, and pass its state and the dispatch function to the components that need it.
Let's start implementing the Reducer Hook:
import React, { useState, useReducer } from 'react'
const [ user, setUser ] = useState('')
Replace the preceding State Hook with a Reducer Hook—the initial state is an empty string, as we had it before:
const [ user, dispatchUser ] = useReducer(userReducer, '')
<UserBar user={user} dispatch={dispatchUser} />
export default function UserBar ({ user, dispatch }) {
if (user) {
return <Logout user={user} dispatch={dispatch} />
} else {
return (
<React.Fragment>
<Login dispatch={dispatch} />
<Register dispatch={dispatch} />
</React.Fragment>
)
}
}
export default function Login ({ dispatch }) {
<form onSubmit={e => { e.preventDefault(); dispatch({ type: 'LOGIN', username }) }}>
export default function Register ({ dispatch }) {
// ...
<form onSubmit={e => { e.preventDefault(); dispatch({ type: 'REGISTER', username }) }}>
export default function Logout ({ user, dispatch }) {
// ...
<form onSubmit={e => { e.preventDefault(); dispatch({ type: 'LOGOUT' }) }}>
Now, our app should work the same way as before, but it uses the Reducer Hook instead of a simple State Hook!
It also makes sense to use a Reducer Hook for the posts state, because, later on, we are going to have features that can be used to delete and edit posts, so it makes a lot of sense to keep these complex state changes contained. Let's now get started replacing the posts State Hook with a Reducer Hook.
Again, we start by defining actions. At the moment, we are only going to consider a CREATE_POST action:
{ type: 'CREATE_POST', title: 'React Hooks', content: 'The greatest thing since sliced bread!', author: 'Daniel Bugl' }
That is the only action we are going to need for posts, at the moment.
Next, we are going to define the reducer function in a similar way that we did for the user state:
function postsReducer (state, action) {
switch (action.type) {
case 'CREATE_POST':
const newPost = { title: action.title, content: action.content, author: action.author }
return [ newPost, ...state ]
default:
throw new Error()
}
}
Now, the postsReducer function is defined, and we can move on to creating the Reducer Hook.
Finally, we are going to define and use the Reducer Hook for the posts state:
const [ posts, setPosts ] = useState(defaultPosts)
We replace it with the following Reducer Hook:
const [ posts, dispatchPosts ] = useReducer(postsReducer, defaultPosts)
{user && <CreatePost user={user} posts={posts} dispatch={dispatchPosts} />}
export default function CreatePost ({ user, posts, dispatch }) {
function handleCreate () {
dispatch({ type: 'CREATE_POST', title, content, author: user })
}
Now, the posts state also uses a Reducer Hook instead of a State Hook, and it works in the same way as before! However, if we want to add more logic for managing posts, such as searching, filtering, deleting, and editing, later on, it will be much easier to do so.
The example code for using Reducer Hooks in our blog app can be found in the Chapter04/chapter4_1 folder.
Just run npm install in order to install all dependencies and npm start to start the application; then visit http://localhost:3000 in your browser (if it did not open automatically).
Currently, we have two different dispatch functions: one for the user state, and one for the posts state. In our case, it makes sense to combine the two reducers into one, which then calls further reducers, in order to deal with the sub-state.
Let's start merging our reducer functions into one reducer function. While we are at it, let's refactor all the reducers into a src/reducers.js file, in order to keep the src/App.js file more readable:
function userReducer (state, action) {
switch (action.type) {
case 'LOGIN':
case 'REGISTER':
return action.username
case 'LOGOUT':
return ''
default:
throw new Error()
}
}
function postsReducer (state, action) {
switch (action.type) {
case 'CREATE_POST':
const newPost = { title: action.title, content: action.content, author: action.author }
return [ newPost, ...state ]
default:
throw new Error()
}
}
export default function appReducer (state, action) {
return {
user: userReducer(state.user, action),
posts: postsReducer(state.posts, action)
}
}
import appReducer from './reducers'
const [ user, dispatchUser ] = useReducer(userReducer,
'')
const [ posts, dispatchPosts = useReducer(postsReducer,
defaultPosts)
We replace the preceding Reducer Hook definitions with a single Reducer Hook definition for the appReducer:
const [ state, dispatch ] = useReducer(appReducer, { user: '', posts: defaultPosts })
const { user, posts } = state
<UserBar user={user} dispatch={dispatch} />
<br />
{user && <CreatePost user={user} posts={posts} dispatch={dispatch} />}
As we can see, now there is only one dispatch function, and a single state object.
However, if we try logging in now, we are going to see an error from the postsReducer. This is because we are still throwing an error on unhandled actions. In order to avoid this, we have to instead ignore unhandled actions, and simply return the current state:
Edit the userReducer and postsReducer functions in src/reducers.js, and remove the following code:
default:
throw new Error()
Replace the preceding code with a return statement that returns the current state:
default:
return state
As we can see, now our app still works in exactly the same way as before, but we are using a single reducer for our whole app state!
The example code for using a single Reducer Hook in our blog app can be found in the Chapter04/chapter4_2 folder.
Just run npm install in order to install all dependencies, and npm start to start the application, and then visit http://localhost:3000 in your browser (if it did not open automatically).
The last essential Hook that we are going to be using frequently is the Effect Hook. Using the Effect Hook, we can perform side effects from our components, such as fetching data when the component mounts or updates.
In the case of our blog, we are going to implement a feature that updates the title of our web page when we log in, so that it contains the username of the currently logged-in user.
If you have worked with React before, you have probably used the componentDidMount and componentDidUpdate life cycle methods. For example, we can set the document title to a given prop as follows, using a React class component. In the following code section, the life cycle method is highlighted in bold:
import React from 'react'
class App extends React.Component {
componentDidMount () {
const { title } = this.props
document.title = title
}
render () {
return (
<div>Test App</div>
)
}
}
This works fine. However, when the title prop updates, the change does not get reflected in the title of our web page. To solve this problem, we need to define the componentDidUpdate life cycle method (new code in bold), as follows:
import React from 'react'
class App extends React.Component {
componentDidMount () {
const { title } = this.props
document.title = title
}
componentDidUpdate (prevProps) {
const { title } = this.props
if (title !== prevProps.title) {
document.title = title
}
}
render () {
return (
<div>Test App</div>
)
}
}
You might have noticed that we are writing almost the same code twice; therefore, we could create a new method to deal with updates to title, and then call it from both life cycle methods. In the following code section, the updated code is highlighted in bold:
import React from 'react'
class App extends React.Component {
updateTitle () {
const { title } = this.props
document.title = title
}
componentDidMount () {
this.updateTitle()
}
componentDidUpdate (prevProps) {
if (this.props.title !== prevProps.title) {
this.updateTitle()
}
}
render () {
return (
<div>Test App</div>
)
}
}
However, we still need to call this.updateTitle() twice. When we update the code later on, and, for example, pass an argument to this.updateTitle(), we always need to remember to pass it in both calls to the method. If we forget to update one of the life cycle methods, we might introduce bugs. Furthermore, we need to add an if condition to componentDidUpdate, in order to avoid calling this.updateTitle() when the title prop did not change.
In the world of Hooks, the componentDidMount and componentDidUpdate life cycle methods are combined in the useEffect Hook, which—when not specifying a dependency array—triggers whenever any props in the component change.
So, instead of using a class component, we can now define a function component with an Effect Hook, which does the same thing as before. The function passed to the Effect Hook is called "effect function":
import React, { useEffect } from 'react'
function App ({ title }) {
useEffect(() => {
document.title = title
})
return (
<div>Test App</div>
)
}
And that's all we need to do! The Hook that we have defined will call our effect function every time any props change.
If we want to make sure that our effect function only gets called when the title prop changes, for example, for performance reasons, we can specify which values should trigger the changes, as a second argument to the useEffect Hook:
useEffect(() => {
document.title = title
}, [title])
And this is not just restricted to props, we can use any value here, even values from other Hooks, such as a State Hook or a Reducer Hook:
const [ title, setTitle ] = useState('')
useEffect(() => {
document.title = title
}, [title])
As we can see, using an Effect Hook is much more straightforward than using life cycle methods when dealing with changing values.
If we want to replicate the behavior of only adding a componentDidMount life cycle method, without triggering when the props change, we can do this by passing an empty array as the second argument to the useEffect Hook:
useEffect(() => {
document.title = title
}, [])
Passing an empty array means that our effect function will only trigger once when the component mounts, and it will not trigger when props change. However, instead of thinking about the mounting of components, with Hooks, we should think about the dependencies of effects. In this case, the effect does not have any dependencies, which means it will only trigger once. If an effect has dependencies specified, it will trigger again when any of the dependencies change.
Sometimes effects need to be cleaned up when the component unmounts. To do so, we can return a function from the effect function of the Effect Hook. This returned function works similarly to the componentWillUnmount life cycle method:
useEffect(() => {
const updateInterval = setInterval(() => console.log('fetching update'), updateTime)
return () => clearInterval(updateInterval)
}, [updateTime])
The code marked in bold above is called the cleanup function. The cleanup function will be called when the component unmounts and before running the effect again. This avoids bugs when, for example, the updateTime prop changes. In that case, the previous effect will be cleaned up and a new interval with the updated updateTime value will be defined.
Now that we have learned how the Effect Hook works, we are going to use it in our blog app, to implement the title changing when we log in/log out (when the user state changes).
Let's get started implementing an Effect Hook in our blog app:
import React, { useReducer, useEffect } from 'react'
useEffect(() => {
if (user) {
document.title = `${user} - React Hooks Blog`
} else {
document.title = 'React Hooks Blog'
}
}, [user])
If we start our app now, we can see that the document.title gets set to React Hooks Blog, because the Effect Hook triggers when the App component mounts, and the user value is not defined yet:
After logging in with Test User, we can see that the document.title changes to Test User - React Hooks Blog:
As we can see, our Effect Hook re-triggers successfully after the user value changes!
The example code for implementing Effect Hooks in our blog app can be found in the Chapter04/chapter4_3 folder.
Just run npm install in order to install all dependencies, and npm start to start the application, and then visit http://localhost:3000 in your browser (if it did not open automatically).
In this chapter, we first learned about actions, reducers, and Reducer Hooks. We also learned when we should use Reducer Hooks instead of State Hooks. Then, we replaced our existing global State Hooks for the user and posts states, with two Reducer Hooks. Next, we merged the two Reducer Hooks into a single app Reducer Hook. Finally, we learned about Effect Hooks, and how they can be used instead of componentDidMount and componentDidUpdate.
In the next chapter, we are going to learn about React context, and how to use it with Hooks. Then, we are going to add Context Hooks to our app, in order to avoid having to pass down props over multiple layers of components.
In order to recap what we have learned in this chapter, try to answer the following questions:
If you are interested in more information about the concepts that we have explored in this chapter, take a look at the following reading material:
In the previous chapters, we learned about the most fundamental Hooks, such as the State Hook, the Reducer Hook, and the Effect Hook. We developed a small blog application using these Hooks. We have noticed during the development of our blog app, that we have to pass down the user state from the App component to the UserBar component, and from the UserBar component to the Login, Register, and Logout components. To avoid having to pass down the state like this, we are now going to learn about React context and Context Hooks.
We are going to begin by learning what React context is, and what providers and consumers are. Then, we are going to use Context Hooks as a context consumer, and discuss when context should be used. Finally, we are going to implement themes and global state via contexts.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found on the GitHub repository: hhttps://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter05
Check out the following video to see the code in action:
Now, let's get started with the chapter.
In the previous chapters, we passed down the user state and dispatch function from the App component, to the UserBar component; and then from the UserBar component to the Logout, Login, and Register components. React context provides a solution to this cumbersome way of passing down props over multiple levels of components, by allowing us to share values between components, without having to explicitly pass them down via props. As we are going to see, React context is perfect for sharing values across the whole application.
First, we are going to have a closer look at the problem of passing down props. Then, we are going to introduce React context as a solution to the problem.
Before learning about React context in depth, let's recap what we implemented in the earlier chapters, in order to get a feeling for the problem that contexts solve:
const [ state, dispatch ] = useReducer(appReducer, { user: '', posts: defaultPosts })
const { user, posts } = state
return (
<div style={{ padding: 8 }}>
<UserBar user={user} dispatch={dispatch} />
<br />
{user && <CreatePost user={user} posts={posts} dispatch={dispatch} />}
<br />
<hr />
<PostList posts={posts} />
</div>
)
export default function UserBar ({ user, dispatch }) {
if (user) {
return <Logout user={user} dispatch={dispatch} />
} else {
return (
<React.Fragment>
<Login dispatch={dispatch} />
<Register dispatch={dispatch} />
</React.Fragment>
)
}
}
React context allows us to skip steps 2 and 3, and jump straight from step 1 to step 4. As you can imagine, with larger apps, context becomes even more useful, because we might have to pass down props over many levels.
React context is used to share values across a tree of React components. Usually, we want to share global values, such as the user state and the dispatch function, the theme of our app, or the chosen language.
React context consists of two parts:
We are first going to look at how contexts work, using a simple example, and, in the next section, we are going to implement them in our blog app. We create a new project with the create-react-app tool. In our simple example, we are going to define a theme context, containing the primary color of an app.
First, we have to define the context. The way this works has not changed since Hooks were introduced.
We simply use the React.createContext(defaultValue) function to create a new context object. We set the default value to { primaryColor: 'deepskyblue' }, so our default primary color, when no provider is defined, will be 'deepskyblue'.
In src/App.js, add the following definition before the App function:
export const ThemeContext = React.createContext({ primaryColor: 'deepskyblue' })
That is all we need to do to define a context with React. Now we just need to define the consumer.
Now, we have to define the consumer in our Header component. We are going to do this in the traditional way for now, and in the next steps use Hooks to define the consumer:
import React from 'react'
import { ThemeContext } from './App'
const Header = ({ text }) => (
<ThemeContext.Consumer>
{theme => (
<h1 style={{ color: theme.primaryColor }}>{text}</h1>
)}
</ThemeContext.Consumer>
)
export default Header
import Header from './Header'
const App = () => (
<Header text="Hello World" />
)
export default App
Using contexts like this works, but, as we have learned in the first chapter, using components with render function props in this way clutters our UI tree, and makes our app harder to debug and maintain.
A better way to use contexts is with the useContext Hook! That way, we can use context values like any other value, in a similar way to the useState Hook:
import React, { useContext } from 'react'
import { ThemeContext } from './App'
const Header = ({ text }) => {
const theme = useContext(ThemeContext)
return <h1 style={{ color: theme.primaryColor }}>{text}</h1>
}
export default Header
As we can see, using Hooks makes our context consumer code much more concise. Furthermore, it will be easier to read, maintain, and debug.
We can see that the header now has the color deepskyblue:
As we can see, our theme context successfully provides the theme for the header.
Contexts use the default value that is passed to React.createContext, when there is no provider defined. This is useful for debugging the components when they are not embedded in the app. For example, we could debug a single component as a standalone component. In an app, we usually want to use a provider to provide the value for the context, which we are going to define now.
Edit src/App.js, and in our App function, we simply wrap the Header component with a <ThemeContext.Provider> component, where we pass coral as primaryColor:
const App = () => (
<ThemeContext.Provider value={{ primaryColor: 'coral' }}>
<Header text="Hello World" />
</ThemeContext.Provider>
)
export default App
We can now see that our header color changed from deepskyblue to coral:
If we want to change the value of our context, we can simply adjust the value prop that is passed to the Provider component.
Now that we have defined a single provider for our context, let's move on to defining multiple, nested providers.
With React context, it is also possible to define multiple providers for the same context. Using this technique, we can override the context value in certain parts of our app. Let's consider the earlier example, and add a second header to it:
const App = () => (
<ThemeContext.Provider value={{ primaryColor: 'coral' }}>
<Header text="Hello World" />
<Header text="This is a test" />
</ThemeContext.Provider>
)
export default App
const App = () => (
<ThemeContext.Provider value={{ primaryColor: 'coral' }}>
<Header text="Hello World" />
<ThemeContext.Provider value={{ primaryColor: 'deepskyblue' }}>
<Header text="This is a test" />
</ThemeContext.Provider>
</ThemeContext.Provider>
)
export default App
If we open the app in our browser, the second header now has a different color from the first one:
As we can see, we can override React context values by defining providers. Providers can also be nested, therefore overriding the values of other providers that are higher up in the component tree.
The example code for the small theme context example can be found in the Chapter05/chapter5_1 folder.
Just run npm install in order to install all dependencies, and npm start to start the application; then visit http://localhost:3000 in your browser (if it did not open automatically).
However, we should be careful, and not use React context too often, because it makes reusing components more difficult. We should only use contexts when we need to access data in many components, which are at different nesting levels. Furthermore, we need to make sure that we only use contexts for non-frequently changing data. Frequently changing values of contexts can cause our whole component tree to re-render, resulting in performance problems. That is why, for frequently changing values, we should use a state management solution such as Redux or MobX, instead.
If we only want to avoid having to pass down props, we can pass down the rendered component instead of the data. For example, let's say we have a Page component, which renders a Header component, which renders a Profile component, which then renders an Avatar component. We get a headerSize prop passed to the Page component, which we need in the Header component, but also in the Avatar component. Instead of passing down props through multiple levels, we could do the following:
function Page ({ headerSize }) {
const profile = (
<Profile>
<Avatar size={headerSize} />
</Profile>
)
return <Header size={headerSize} profile={profile} />
}
Now, only the Page component needs to know about the headerSize prop, and there is no need to pass it down further in the tree. In this case, contexts are not necessary.
Such a pattern is called inversion of control, and it can make your code much cleaner than passing down props or using a context. However, we should not always use this pattern either, because it makes the higher-level component more complicated.
After learning how to implement themes in a small example, we are now going to implement themes in our blog app, using React context and Hooks.
First, we have to define the context. Instead of defining it in the src/App.js file, in our blog app, we are going to create a separate file for the context. Having a separate file for contexts makes it easier to maintain them later on. Furthermore, we always know where to import the contexts from, because it is clear from the filename.
Let's start defining a theme context:
import React from 'react'
export const ThemeContext = React.createContext({
primaryColor: 'deepskyblue',
secondaryColor: 'coral'
})
Now that we have defined our context, we can move on to defining the Context Hooks.
After defining the context, we are going to define our consumers, using Context Hooks. We start by creating a new component for the header, then define a Context Hook for our existing Post component.
First, we create a new Header component, which is going to display React Hooks Blog in the primaryColor of our app.
Let's create the Header component now:
import React, { useContext } from 'react'
import { ThemeContext } from `'./contexts'
const Header = ({ text }) => {
const { primaryColor } = useContext(ThemeContext)
return <h1 style={{ color: primaryColor }}>{text}</h1>
}
export default Header
Now our Header component is defined, and we can use it.
After creating the Header component, we are going to use it in the App component, as follows:
import Header from './Header'
return (
<div style={{ padding: 8 }}>
<Header text="React Hooks Blog" />
<UserBar user={user} dispatch={dispatch} />
Now, our Header component will be rendered in the app and we can move on to implementing the Context Hook in the Post component.
Next, we want to display the Post headers in the secondary color. To do this, we need to define a Context Hook for the Post component, as follows:
import React, { useContext } from 'react'
import { ThemeContext } from '../contexts'
export default function Post ({ title, content, author }) {
const { secondaryColor } = useContext(ThemeContext)
return (
<div>
<h3 style={{ color: secondaryColor }}>{title}</h3>
If we look at our app now, we can see that both colors are used properly from the ThemeContext:
As we can see, our app now uses the primary color for the main header, and the secondary color for the post titles.
Right now, our Context Hooks use the default value that is specified by the context, when no provider is defined. To be able to change the value, we need to define a provider.
Let's start defining the provider:
import { ThemeContext } from './contexts'
return (
<ThemeContext.Provider value={{ primaryColor: 'deepskyblue', secondaryColor: 'coral' }}>
<div style={{ padding: 8 }}>
<Header text="React Hooks Blog" />
...
<PostList posts={posts} />
</div>
</ThemeContext.Provider>
)
Our app should look exactly the same way as before, but now we are using the value from the provider!
Now that we have defined a provider, we can use it to dynamically change the theme. Instead of passing a static value to the provider, we are going to use a State Hook that defines the current theme. Then, we are going to implement a component that changes the theme.
First, we are going to define a new State Hook, which we are going to use to set the value for the context provider.
Let's define a State Hook, and use it in the context provider:
import React, { useReducer, useEffect, useState } from 'react'
export default function App () {
const [ theme, setTheme ] = useState({
primaryColor: 'deepskyblue',
secondaryColor: 'coral'
})
return (
<ThemeContext.Provider value={theme}>
Our app is still going to look the same way as before, but we are now ready to dynamically change our theme!
The final part of our theme feature is a component that can be used to change the theme dynamically, by making use of the State Hook that we defined earlier. The State Hook is going to re-render the App component, which will change the value that is passed to the ThemeContext.Provider, which, in turn, is going to re-render all the components that make use of the ThemeContext Context Hook.
Let's start implementing the ChangeTheme component:
import React from 'react'
const THEMES = [
{ primaryColor: 'deepskyblue', secondaryColor: 'coral' },
{ primaryColor: 'orchid', secondaryColor: 'mediumseagreen' }
]
function ThemeItem ({ theme, active, onClick }) {
return (
<span onClick={onClick} style={{ cursor: 'pointer', paddingLeft: 8, fontWeight: active ? 'bold' : 'normal' }}>
<span style={{ color: theme.primaryColor }}>Primary</span> / <span style={{ color: theme.secondaryColor }}>Secondary</span>
</span>
)
}
export default function ChangeTheme ({ theme, setTheme }) {
function isActive (t) {
return t.primaryColor === theme.primaryColor && t.secondaryColor === theme.secondaryColor
}
return (
<div>
Change theme:
{THEMES.map((t, i) =>
<ThemeItem key={'theme-' + i} theme={t} active={isActive(t)} onClick={() => setTheme(t)} />
)}
</div>
)
}
import ChangeTheme from './ChangeTheme'
// ...
return (
<ThemeContext.Provider value={theme}>
<div style={{ padding: 8 }}>
<Header text="React Hooks Blog" />
<ChangeTheme theme={theme} setTheme={setTheme} />
<br />
As we can see, we now have a way to change the theme in our app:
Now, we have a context that is consumed via Hooks, which can also be changed via Hooks!
The example code for the theme feature in our blog app can be found in the Chapter05/chapter5_2 folder.
Just run npm install in order to install all dependencies, and npm start to start the application; then visit http://localhost:3000 in your browser (if it did not open automatically).
After learning how to use React context to implement themes in our blog app, we are now going to use a context to avoid having to manually pass down the state and dispatch props for our global app state.
We start by defining the context in our src/contexts.js file.
In src/contexts.js, we define the StateContext, which is going to store the state value and the dispatch function:
export const StateContext = React.createContext({
state: {},
dispatch: () => {}
})
We initialized the state value as an empty object, and the dispatch function as an empty function, which will be used when no provider is defined.
Now, we are going to define the context provider in our src/App.js file, which is going to get the values from the existing Reducer Hook.
Let's define the context provider for global state now:
import { ThemeContext, StateContext } from './contexts'
return (
<StateContext.Provider value={{ state, dispatch }}>
<ThemeContext.Provider value={theme}>
...
</ThemeContext.Provider>
</StateContext.Provider>
)
Now, our context provider provides the state object and the dispatch function to the rest of our app, and we can move on to consuming the context value.
Now that we have defined our context and provider, we can use the state object and the dispatch function in various components.
We start by removing the props that we manually passed to our components in src/App.js. Delete the following code segments marked in bold:
<div style={{ padding: 8 }}>
<Header text="React Hooks Blog" />
<ChangeTheme theme={theme} setTheme={setTheme} />
<br />
<UserBar user={user} dispatch={dispatch} />
<br />
{user && <CreatePost user={user} posts={posts} dispatch={dispatch} />}
<br />
<hr />
<PostList posts={posts} />
</div>
As we are using contexts, there is no need to pass down props manually anymore. We can now move on to refactoring the components.
First, we refactor the user components, and then we move on to the post components.
Let's refactor the user-related components now:
export default function UserBar ({ user, dispatch }) {
if (user) {
return <Logout user={user} dispatch={dispatch} />
} else {
return (
<React.Fragment>
<Login dispatch={dispatch} />
<Register dispatch={dispatch} />
</React.Fragment>
)
}
}
import React, { useContext } from 'react'
import { StateContext } from '../contexts'
export default function UserBar () {
const { state } = useContext(StateContext)
const { user } = state
import React, { useState, useContext } from 'react'
import { StateContext } from '../contexts'
export default function Login () {
const { dispatch } = useContext(StateContext)
import React, { useState, useContext } from 'react'
import { StateContext } from '../contexts'
export default function Register () {
const { dispatch } = useContext(StateContext)
import React, { useContext } from 'react'
import { StateContext } from '../contexts'
export default function Logout () {
const { state, dispatch } = useContext(StateContext)
const { user } = state
Our user-related components now use a context instead of props. Let's move on to refactoring the post-related components.
Now, all that is left to do is refactoring the post components; then our whole app will be using React context for global state:
import React, { useContext } from 'react'
import { StateContext } from '../contexts'
import Post from './Post'
export default function PostList () {
const { state } = useContext(StateContext)
const { posts } = state
import React, { useState, useContext } from 'react'
import { StateContext } from '../contexts'
export default function CreatePost () {
const { state, dispatch } = useContext(StateContext)
const { user } = state
Our app works in the same way as before, but now we use a context for global state, which makes our code much cleaner, and avoids having to pass down props!
The example code for the global state context in our blog app can be found in the Chapter05/chapter5_3 folder.
Just run npm install in order to install all dependencies, and npm start to start the application; then visit http://localhost:3000 in your browser (if it did not open automatically).
In this chapter, we first learned about React context as an alternative to passing down props over multiple levels of React components. We then learned about context providers and consumers, and the new way to define consumers, via Hooks. Next, we learned when it does not make sense to use contexts, and when we should use inversion of control instead. Then, we used what we learned in practice, by implementing themes in our blog app. Finally, we used React context for the global state in our blog app.
In the next chapter, we are going to learn how to request data from a server, using React and Hooks. Then, we are going to learn about React.memo to prevent unnecessary re-rendering of components, and React Suspense to lazily load components when they are needed.
In order to recap what we have learned in this chapter, try to answer the following questions:
If you are interested in more information about the concepts that we have explored in this chapter, take a look at the following reading material:
In the previous chapters, we learned how to use React context as an alternative to manually passing down props. We learned about context providers, consumers, and how to use Hooks as a context consumer. Next, we learned about inversion of control as an alternative to contexts. Finally, we implemented themes and global state, using contexts in our blog app.
In this chapter, we are going to set up a simple backend server, which will be generated from a JavaScript Object Notation (JSON) file, using the json-server tool. Then, we are going to implement requesting resources, by using an Effect Hook in combination with a State Hook. Next, we are going to do the same, using the axios and react-request-hook libraries. Finally, we are going to take a look at preventing unnecessary re-rendering, using React.memo, and lazily loading components through the use of React Suspense.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter06.
Check out the following video to see the code in action:
Now, let's get started with the chapter.
In this section, we are going to learn how to request resources from a server, using Hooks. First, we are going to implement requests by only using the JavaScript fetch function, and the useEffect/useState Hooks. Then, we are going to learn how to request resources, using the axios library in combination with react-request-hook.
Before we can implement requests, we need to create a backend server. Since we are focusing on the user interface at the moment, we are going to set up a dummy server, which will allow us to test out requests. We are going to use the json-server tool to create a full Representational State Transfer (REST) API from a JSON file.
To be able to use the json-server tool, first we need to create a db.json file, which is going to contain our full database for the server. The json-server tool will allow you to make the following:
For all modifying actions (POST, PUT, PATCH, and DELETE), the updated file will automatically be saved by the tool.
We can use our existing structure for posts, which we defined as the default state of the posts reducer. However, we need to make sure that we provide an id value, so that we can query the database later:
[
{ "id": "react-hooks", "title": "React Hooks", "content": "The greatest thing since sliced bread!", "author": "Daniel Bugl" },
{ "id": "react-fragments", "title": "Using React Fragments", "content": "Keeping the DOM tree clean!", "author": "Daniel Bugl" }
]
As for the users, we need to come up with a way to store usernames and passwords. For simplicity, we just store the password in plain text (do not do this in a production environment!). Here, we also need to provide an id value:
[
{ "id": 1, "username": "Daniel Bugl", "password": "supersecure42" }
]
Additionally, we are going to store themes in our database. In order to investigate whether pulling themes from our database works properly, we are now going to define a third theme. As always, each theme needs an id value:
[
{ "id": 1, "primaryColor": "deepskyblue", "secondaryColor": "coral" },
{ "id": 2, "primaryColor": "orchid", "secondaryColor": "mediumseagreen" },
{ "id": 3, "primaryColor": "darkslategray", "secondaryColor": "slategray" }
]
Now, all that is left to do is to combine these three arrays into a single JSON object, by storing the posts array under a posts key, the users array under a users key, and the themes array under a themes key.
Let's start creating the JSON file that is used as a database for our backend server:
{
"posts": [
{ "id": "react-hooks", "title": "React Hooks", "content": "The greatest thing since sliced bread!", "author": "Daniel Bugl" },
{ "id": "react-fragments", "title": "Using React Fragments", "content": "Keeping the DOM tree clean!", "author": "Daniel Bugl" }
],
"users": [
{ "id": 1, "username": "Daniel Bugl", "password": "supersecure42" }
],
"themes": [
{ "id": 1, "primaryColor": "deepskyblue", "secondaryColor": "coral" },
{ "id": 2, "primaryColor": "orchid", "secondaryColor": "mediumseagreen" },
{ "id": 3, "primaryColor": "darkslategray", "secondaryColor": "slategray" }
]
}
For the json-server tool, we simply need a JSON file as the database, and the tool will create a full REST API for us.
Now, we are going to install and start our backend server by using the json-server tool:
> npm install --save json-server
> npx json-server --watch server/db.json
The npx command executes commands that were installed locally in a project. We need to use npx here, because we did not globally install the json-server tool (via npm install -g json-server).
We executed the json-server tool, and made it watch the server/db.json file that we created earlier. The --watch flag means that it will listen to changes to the file, and refresh automatically.
Now, we can go to http://localhost:3000/posts/react-hooks in order to see our post object:
As we can see, the tool created a full REST API from the database JSON file for us!
Next, we need to adjust our package.json file, in order to start the server, in addition to our client (running via webpack-dev-server).
Let's start adjusting the package.json file:
"scripts": {
"start:server": "npx json-server --watch server/db.json --port 4000",
"start": "react-scripts start",
"scripts": {
"start:server": "npx json-server --watch server/db.json",
"start:client": "react-scripts start",
> npm install --save concurrently
"scripts": {
"start": "npx concurrently \"npm run start:server\" \"npm run start:client\"",
Now, running npm start will run the client, as well as the backend server.
Finally, we have to define a proxy, to make sure that we can request our API from the same Uniform Resource Locator (URL) as the client. This is needed because, otherwise, we would have to deal with cross-site requests, which are a bit more complicated to handle. We are going to define a proxy that will forward requests from http://localhost:3000/api/ to http://localhost:4000/.
Now, let's configure the proxy:
> npm install --save http-proxy-middleware
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(proxy('/api', {
target: 'http://localhost:4000',
pathRewrite: { '^/api': '' }
}))
}
The preceding proxy configuration will link /api to our backend server; therefore, we can now start both the server and the client via the following command:
> npm start
Then, we can access the API by opening http://localhost:3000/api/posts/react-hooks!
By default, the json-server tool defines the following routes: https://github.com/typicode/json-server#routes.
We can also define our own routes, by creating a routes.json file, where we can rewrite existing routes to other routes: https://github.com/typicode/json-server#add-custom-routes.
For our blog app, we are going to define a single custom route: /login/:username/:password. We are going to link this to a /users?username=:username&password=:password query, in order to find a user with the given username and password combination.
We are now going to define the custom login route for our app:
{
"/login/:username/:password": "/users?username=:username&password=:password"
}
"start:server": "npx json-server --watch server/db.json --port 4000 --routes server/routes.json",
Now, our server will be serving our custom login route, which we are going to use later on in this chapter! We can try logging in by opening the following URL in our browser: http://localhost:3000/api/login/Daniel%20Bugl/supersecure42. This returns a user object; therefore, the login was successful!
We can see the user object being returned as text in our browser:
As we can see, accessing our custom route works! We can now use it to log in users.
The example code can be found in the Chapter06/chapter6_1 folder.
Just run npm install in order to install all dependencies, and npm start to start the application; then visit http://localhost:3000 in your browser (if it did not open automatically).
Before we use a library to implement requests using Hooks, we are going to implement them manually, using an Effect Hook to trigger the request, and State/Reducer Hooks to store the result.
First, we are going to request themes from our server, instead of hardcoding the list of themes.
Let's implement requesting themes using an Effect Hook and a State Hook:
import React, { useEffect, useState } from 'react'
const THEMES = [
{ primaryColor: 'deepskyblue', secondaryColor: 'coral' },
{ primaryColor: 'orchid', secondaryColor: 'mediumseagreen' }
]
export default function ChangeTheme ({ theme, setTheme }) {
const [ themes, setThemes ] = useState([])
useEffect(() => {
fetch('/api/themes')
.then(result => result.json())
.then(themes => setThemes(themes))
}, [])
{themes.map(t =>
As we can see, there are now three themes available, all loaded from our database through our server:
Our themes are now loaded from the backend server and we can move on to requesting posts via Hooks.
We are now going to use our backend server to request the posts array, instead of hardcoding it as the default value for the postsReducer.
Let's implement requesting posts using an Effect Hook and a Reducer Hook:
const defaultPosts = [
{ title: 'React Hooks', content: 'The greatest thing since sliced bread!', author: 'Daniel Bugl' },
{ title: 'Using React Fragments', content: 'Keeping the DOM tree clean!', author: 'Daniel Bugl' }
]
const [ state, dispatch ] = useReducer(appReducer, { user: '', posts: [] })
function postsReducer (state, action) {
switch (action.type) {
case 'FETCH_POSTS':
return action.posts
useEffect(() => {
fetch('/api/posts')
.then(result => result.json())
.then(posts => dispatch({ type: 'FETCH_POSTS', posts }))
}, [])
As we can see, the posts now get requested from the server! We can have a look at the DevTools Network tab to see the request:
The posts are now being requested from the backend server. In the next section, we are going to use axios and the react-request-hook to request resources from our server.
The example code can be found in the Chapter06/chapter6_2 folder.
Just run npm install in order to install all dependencies, and npm start to start the application; then visit http://localhost:3000 in your browser (if it did not open automatically).
In the previous section, we used an Effect Hook to trigger the request, and a Reducer/State Hook to update the state, using the result from the request. Instead of manually implementing requests like this, we can use the axios and react-request-hook libraries to easily implement requests using Hooks.
Before we can start using axios and react-request-hook, we have to set up an axios instance and a RequestProvider component.
Let's get started setting up the libraries:
> npm install --save react-request-hook axios
import { RequestProvider } from 'react-request-hook'
import axios from 'axios'
const axiosInstance = axios.create({
baseURL: 'http://localhost:3000/api/'
})
ReactDOM.render(<App />, document.getElementById('root'));
Replace it with this code:
ReactDOM.render(
<RequestProvider value={axiosInstance}>
<App />
</RequestProvider>,
document.getElementById('root')
)
Now, our app is ready to use Resource Hooks!
A more powerful way of dealing with requests, is using the axios and react-request-hook libraries. Using these libraries, we have access to features that can cancel a single request, or even clear all pending requests. Furthermore, using these libraries makes it easier to deal with errors and loading states.
We are now going to implement the useResource Hook in order to request themes from our server:
import { useResource } from 'react-request-hook'
export default function ChangeTheme ({ theme, setTheme }) {
const [ themes, getThemes ] = useResource(() => ({
url: '/themes',
method: 'get'
}))
const { data, isLoading } = themes
useEffect(getThemes, [])
{isLoading && ' Loading themes...'}
{data && data.map(t =>
If we have a look at our app now, we can see that the Loading themes... message gets displayed for a very short time, and, then the themes from our database get displayed! We can now move on to requesting posts using the Resource Hook.
The useResource Hook already handles the state for the result of our request, so we do not need an additional useState Hook to store the state. If we already have an existing Reducer Hook, however, we can use it in combination with the useResource Hook.
We are now going to implement the useResource Hook in combination with a Reducer Hook in our app:
import { useResource } from 'react-request-hook'
const [ posts, getPosts ] = useResource(() => ({
url: '/posts',
method: 'get'
}))
useEffect(getPosts, [])
useEffect(() => {
if (posts && posts.data) {
dispatch({ type: 'FETCH_POSTS', posts: posts.data })
}
}, [posts])
Now, when we fetch new posts, a FETCH_POSTS action will be dispatched. Next, we move on to handling errors during requests.
We have already handled the loading state in the ChangeTheme component. Now, we are going to implement the error state for posts.
Let's get started handling the error state for posts:
function errorReducer (state, action) {
switch (action.type) {
case 'POSTS_ERROR':
return 'Failed to fetch posts'
default:
return state
}
}
export default function appReducer (state, action) {
return {
user: userReducer(state.user, action),
posts: postsReducer(state.posts, action),
error: errorReducer(state.error, action)
}
}
const [ state, dispatch ] = useReducer(appReducer, { user: '', posts: [], error: '' })
const { user, error } = state
useEffect(() => {
if (posts && posts.error) {
dispatch({ type: 'POSTS_ERROR' })
}
if (posts && posts.data) {
dispatch({ type: 'FETCH_POSTS', posts: posts.data })
}
}, [posts])
{error && <b>{error}</b>}
<PostList />
If we only start the client now (via npm run start:client), the error will be displayed:
As we can see, the Failed to fetch posts error gets displayed in our app, because the server is not running. We can now move on to implementing post creation via requests.
Now that we have a good grasp on how to request data from an API, we are going to use the useResource Hook for the creation of new data.
Let's get started implementing post creation using the Resource Hook:
import { useResource } from 'react-request-hook'
const [ , createPost ] = useResource(({ title, content, author }) => ({
url: '/posts',
method: 'post',
data: { title, content, author }
}))
function handleCreate () {
createPost({ title, content, author: user })
dispatch({ type: 'CREATE_POST', title, content, author: user })
}
if (posts && posts.data) {
dispatch({ type: 'FETCH_POSTS', posts: posts.data.reverse() })
}
Now, inserting a new post via the server works fine and we can move on to implementing registration!
Next, we are going to implement registration, which is going to work in very similar way to creating posts.
Let's get started implementing registration:
import React, { useState, useContext, useEffect } from 'react'
import { useResource } from 'react-request-hook'
const [ user, register ] = useResource((username, password) => ({
url: '/users',
method: 'post',
data: { username, password }
}))
useEffect(() => {
if (user && user.data) {
dispatch({ type: 'REGISTER', username: user.data.username })
}
}, [user])
<form onSubmit={e => { e.preventDefault(); register(username, password) }}>
Now, if we enter a Username and Password, and press Register, a new user will be inserted into our db.json file and, just like before, we will be logged in. We now move on to implementing login via Resource Hooks.
Finally, we are going to implement login, via requests using our custom route. After doing so, our blog app will be fully connected to the server.
Let's get started implementing login:
import React, { useState, useContext, useEffect } from 'react'
import { useResource } from 'react-request-hook'
const [ loginFailed, setLoginFailed ] = useState(false)
const [ password, setPassword ] = useState('')
function handlePassword (evt) {
setPassword(evt.target.value)
}
<input type="password" value={password} onChange={handlePassword} name="login-username" id="login-username" />
const [ user, login ] = useResource((username, password) => ({
url: `/login/${encodeURI(username)}/${encodeURI(password)}`,
method: 'get'
}))
useEffect(() => {
if (user && user.data) {
if (user.data.length > 0) {
setLoginFailed(false)
dispatch({ type: 'LOGIN', username: user.data[0].username })
} else {
setLoginFailed(true)
}
}
if (user && user.error) {
setLoginFailed(true)
}
}, [user])
<form onSubmit={e => { e.preventDefault(); login(username, password) }}>
{loginFailed && <span style={{ color: 'red' }}>Invalid username or password</span>}
As we can see, entering a wrong Username or Password (or no Password) will result in an error, while entering the correct Username/Password combination will log us in:
Now, our app is fully connected to the backend server!
The example code can be found in the Chapter06/chapter6_3 folder.
Just run npm install in order to install all dependencies, and npm start to start the application; then visit http://localhost:3000 in your browser (if it did not open automatically).
With class components we had shouldComponentUpdate, which would prevent components from re-rendering if the props did not change.
With function components, we can do the same using React.memo, which is a higher-order component. React.memo memoizes the result, which means that it will remember the last rendered result, and, in cases where the props did not change, it will skip re-rendering the component:
const SomeComponent = () => ...
export default React.memo(SomeComponent)
By default, React.memo will act like the default definition of shouldComponentUpdate, and it will only shallowly compare the props object. If we want to do a special comparison, we can pass a function as a second argument to React.memo:
export default React.memo(SomeComponent, (prevProps, nextProps) => {
// compare props and return true if the props are equal and we should not update
})
Unlike shouldComponentUpdate, the function that is passed to React.memo returns true when the props are equal, and thus it should not update, which is the opposite of how shouldComponentUpdate works! After learning about React.memo, let's try it out in practice by implementing React.memo for the Post component.
First, let's find out when the Post component re-renders. To do this, we are going to add a console.log statement to our Post component, as follows:
export default function Post ({ title, content, author }) {
console.log('rendering Post')
As we can see, the Post components unnecessarily re-render after logging in, although their props did not change. We can use React.memo to prevent this, as follows:
export default function Post ({ title, content, author }) {
export default React.memo(Post)
If we wanted to do a custom check on whether the posts are equal, we could, for example, compare title, content, and author, as follows:
export default React.memo(Post,
(prev, next) => prev.title === next.title && prev.content === next.content && prev.author === next.author
)
In our case, doing this will have the same effect, because React already does a shallow comparison of all props, by default. This function only becomes useful when we have deep objects to compare, or when we want to ignore changes in certain props. Please note that we should not prematurely optimize our code. Re-renders can be fine, since React is intelligent, and does not paint to the browser if nothing changed. Therefore, it might be overkill to optimize all re-renders, unless a certain case has already been identified as a performance bottleneck.
The example code can be found in the Chapter06/chapter6_4 folder.
Just run npm install in order to install all dependencies, and npm start to start the application; then visit http://localhost:3000 in your browser (if it did not open automatically).
React Suspense allows us to let components wait before rendering. At the moment, React Suspense only allows us to dynamically load components with React.lazy. In the future, Suspense will support other use cases, such as data fetching.
React.lazy is another form of performance optimization. It lets us load a component dynamically in order to reduce the bundle size. Sometimes we want to avoid loading all of the components during the initial render, and only request certain components when they are needed.
For example, if our blog has a member area, we only need to load it after the user has logged in. Doing this will reduce the bundle size for guests who only visit our blog to read blog posts. To learn about React Suspense, we are going to lazily load the Logout component in our blog app.
First, we have to specify a loading indicator, which will be shown when our lazily-loaded component is loading. In our example, we are going to wrap the UserBar component with React Suspense.
Edit src/App.js, and replace the <UserBar /> component with the following code:
<React.Suspense fallback={"Loading..."}>
<UserBar />
</React.Suspense>
Now, our app is ready for implementing lazy loading.
Next, we are going to implement lazy loading for the Logout component by wrapping it with React.lazy(), as follows:
import Logout from './Logout'
const Logout = React.lazy(() => import('./Logout'))
If we want to see lazy loading in action, we can set Network Throttling to Slow 3G in Google Chrome:
If we refresh the page now, and then log in, we can first see the Loading... message, and then the Logout component will be shown. If we take a look at the Network logs, we can see that the Logout component was requested via the network:
As we can see, the Logout component is now lazily loaded, which means that it will only be requested when needed.
The example code can be found in the Chapter06/chapter6_5 folder.
Just run npm install in order to install all dependencies, and npm start to start the application; then visit http://localhost:3000 in your browser (if it did not open automatically).
In this chapter, we first learned how to set up an API server from a JSON file. Then, we learned how to request resources using Effect and State/Reducer Hooks. Next, we learned how to request resources using the axios and react-request-hook libraries. Finally, we learned how to prevent unnecessary re-rendering using React.memo, and how to lazily-load components with React Suspense.
In the next chapter, we are going to add routes to our application, and learn how to use Hooks for routing.
In order to recap what we have learned in this chapter, try to answer the following questions:
If you are interested in more information about the concepts that we have explored in this chapter, take a look at the following reading material:
In the previous chapter, we learned how to request resources with Hooks. We first implemented requesting resources using State/Reducer and Effect Hooks. Then, we learned about the axios and react-request-hook libraries.
In this chapter, we are going to create multiple pages and implement routing in our app. Routing is important in almost every application. To implement routing, we are going to learn how to use use the Navi library, a Hook-based navigation system. Finally, we are also going to learn about dynamic links, and how to access routing information using Hooks.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter07.
Check out the following video to see the code in action:
Now, let's get started with the chapter.
At the moment, our blog application is a so-called single-page application. However, most larger apps consist of multiple pages. In a blog app, we at least want to have a separate page for each blog post.
Before we can set up routing, we need to create the various pages that we want to render. In our blog app, we are going to define the following pages:
All pages will show a HeaderBar, which renders the Header, UserBar, ChangeTheme, and CreatePost components. We are now going to start by creating a component for the HeaderBar. Afterward, we are going to implement the page components.
First of all, we are going to refactor some contents of our App component into a HeaderBar component. The HeaderBar component will contain everything that we want to display on every page: the Header, UserBar, ChangeTheme, and CreatePost components.
Let's start creating the HeaderBar component:
import React, { useContext } from 'react'
export default function HeaderBar ({ setTheme }) {
return (
<div>
</div>
)
}
<Header text="React Hooks Blog" />
<ChangeTheme theme={theme} setTheme={setTheme} />
<br />
<React.Suspense fallback={"Loading..."}>
<UserBar />
</React.Suspense>
<br />
{user && <CreatePost />}
import CreatePost from '../post/CreatePost'
import UserBar from '../user/UserBar'
import Header from '../Header'
import ChangeTheme from '../ChangeTheme'
import { ThemeContext, StateContext } from '../contexts'
export default function HeaderBar ({ setTheme }) {
const theme = useContext(ThemeContext)
const { state } = useContext(StateContext)
const { user } = state
return (
import HeaderBar from './pages/HeaderBar'
<div style={{ padding: 8 }}>
<HeaderBar setTheme={setTheme} />
<hr />
Now, we have a separate component for the HeaderBar, which will be shown on all pages. Next, we move on to creating the HomePage component.
Now, we are going to create the HomePage component from the PostList component and the Resource Hook that is concerned with the posts. Again, we are going to refactor src/App.js, in order to create a new component.
Let's start creating the HomePage component:
import React, { useEffect, useContext } from 'react'
import { StateContext } from '../contexts'
export default function HomePage () {
const { state, dispatch } = useContext(StateContext)
const { error } = state
return (
<div>
</div>
)
}
import { useResource } from 'react-request-hook'
import PostList from '../post/PostList'
const [ posts, getPosts ] = useResource(() => ({
url: '/posts',
method: 'get'
}))
useEffect(getPosts, [])
useEffect(() => {
if (posts && posts.error) {
dispatch({ type: 'POSTS_ERROR' })
}
if (posts && posts.data) {
dispatch({ type: 'FETCH_POSTS', posts: posts.data.reverse() })
}
}, [posts])
{error && <b>{error}</b>}
<PostList />
import HomePage from './pages/HomePage'
<hr />
<HomePage />
Now, we have successfully refactored our current code into a HomePage component. Next, we move on to creating the PostPage component.
We are now going to define a new page component, where we will only fetch a single post from our API and display it.
Let's start creating the PostPage component now:
import React, { useEffect } from 'react'
import { useResource } from 'react-request-hook'
import Post from '../post/Post'
export default function PostPage ({ id }) {
const [ post, getPost ] = useResource(() => ({
url: `/posts/${id}`,
method: 'get'
}))
useEffect(getPost, [id])
return (
<div>
{(post && post.data)
? <Post {...post.data} />
: 'Loading...'
}
<hr />
</div>
)
}
We now also have a separate page for single posts.
To test out the new page, we are going to replace the HomePage component in src/App.js with the PostPage component, as follows:
import PostPage from './pages/PostPage'
<PostPage id={'react-hooks'} />
As we can see, now only one post, the React Hooks post, gets rendered.
The example code can be found in the Chapter07/chapter7_1 folder.
Just run npm install in order to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it did not open automatically).
We are going to use the Navi library for routing. Navi supports React Suspense, Hooks, and error boundary APIs of React natively, which makes it the perfect fit to implement routing through the use of Hooks. To implement routing, we are first going to define routes from the pages that we defined in the previous section. Finally, we are going to define links from the main page to the corresponding post pages, and from these pages back to the main page.
Toward the end of this chapter, we are going to extend our routing functionality by implementing routing Hooks.
The first step when implementing routing is to install the navi and react-navi libraries. Then, we define the routes. Follow the given steps to do so:
> npm install --save navi react-navi
import { Router, View } from 'react-navi'
import { mount, route } from 'navi'
import HomePage from './pages/HomePage'
const routes = mount({
'/': route({ view: <HomePage /> }),
'/view/:id': route(req => {
return { view: <PostPage id={req.params.id} /> }
}),
})
<Router routes={routes}>
<div style={{ padding: 8 }}>
<HeaderBar setTheme={setTheme} />
<hr />
<View />
</div>
</Router>
Now, if we go to http://localhost:3000, we can see a list of all posts, and when we go to http://localhost:3000/view/react-hooks, we can see a single post: the React Hooks post.
Now, we are going to define links from each post to the page of the corresponding single post, and then back to the main page from the post page. The links will be used to access the various routes that have been defined in our app. First, we are going to define links from the home page to the single post pages. Next, we are going to define links from the single post pages back to the main page.
We start by shortening the post content in the list, and defining links from the PostList to the corresponding post pages. To do so, we have to define static links from the PostList on the home page to the specific post pages.
Let's define those links now:
import { Link } from 'react-navi'
function Post ({ id, title, content, author, short = false }) {
let processedContent = content
if (short) {
if (content.length > 30) {
processedContent = content.substring(0, 30) + '...'
}
}
<div>{processedContent}</div>
{short &&
<div>
<br />
<Link href={`/view/${id}`}>View full post</Link>
</div>
}
<Post {...p} short={true} />
Now we can see that each post on the main page is trimmed to 30 characters, and has a link to the corresponding single post page:
As we can see, routing is quite simple. Now, each post has a link to its corresponding full post page.
Now, we just need a way to get back to the main page from a single post page. We are going to repeat a similar process to what we have done previously. Let's define the links back to the main page now:
import { Link } from 'react-navi'
return (
<div>
<div><Link href="/">Go back</Link></div>
Now, our app also provides a way back to the home page.
Previously, we dispatched a CREATE_POST action when a new post gets created. However, this action does not contain the post id, which means that links to newly created posts will not work.
We are now going to adjust the code to pass the post id to the CREATE_POST action:
import React, { useState, useContext, useEffect } from 'react'
const [ post, createPost ] = useResource(({ title, content, author }) => ({
useEffect(() => {
if (post && post.data) {
dispatch({ type: 'CREATE_POST', ...post.data })
}
}, [post])
function handleCreate () {
createPost({ title, content, author: user })
dispatch({ type: 'CREATE_POST', title, content, author: user })
}
function postsReducer (state, action) {
switch (action.type) {
case 'FETCH_POSTS':
return action.posts
case 'CREATE_POST':
const newPost = { title: action.title, content: action.content, author: action.author, id: action.id }
return [ newPost, ...state ]
Now, links to the newly created posts work fine, because the id value is added to the inserted post object.
The example code can be found in the Chapter07/chapter7_2 folder.
Just run npm install in order to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it did not open automatically).
After implementing basic routing using navi and react-navi, we are now going to implement more advanced use cases using routing Hooks, which are provided by react-navi. Routing Hooks can be used to make routing more dynamic. For example, by allowing navigation to different routes from other Hooks. Furthermore, we can use Hooks to access all route-related information within a component.
First, we will have a look at three of the Hooks that are provided by the Navi library:
The useNavigation Hook has the following signature:
const navigation = useNavigation()
It returns the navigation object of Navi, which contains the following functions to manage the navigation state of the app:
The useCurrentRoute Hook has the following signature:
const route = useCurrentRoute()
It returns the latest non-busy route, which contains all information that Navi knows about the current page:
The useLoadingRoute Hook has the following signature:
const loadingRoute = useLoadingRoute()
It returns the Route object for the page that is currently being fetched. If no page is currently being fetched, it outputs undefined. The object looks the same as the Route object of the useCurrentRoute Hook.
First, we are going to use the useNavigation Hook to implement programmatic navigation. We want to automatically redirect to the corresponding post page after creating a new post.
Let's implement programmatic navigation in the CreatePost component using Hooks:
import { useNavigation } from 'react-navi'
const navigation = useNavigation()
useEffect(() => {
if (post && post.data) {
dispatch({ type: 'CREATE_POST', ...post.data })
navigation.navigate(`/view/${post.data.id}`)
}
}, [post])
If we create a new post object now, we can see that after pressing the Create button, we automatically get redirected to the page of the corresponding post. We can now move on to accessing route information using Hooks.
Next, we are going to use the useCurrentRoute Hook to access information about the current route/URL. We are going to use this Hook to implement a footer, which will display the href value of the current route.
Let's get started implementing the footer now:
import React from 'react'
import { useCurrentRoute } from 'react-navi'
export default function FooterBar () {
const { url } = useCurrentRoute()
return (
<div>
<a href={url.href}>{url.href}</a>
</div>
)
}
Now, when we, for example, open a post page, we can see the href value of the current post in the footer:
As we can see, our footer works properly—it always shows the href value of the current page.
The example code can be found in the Chapter07/chapter7_3 folder.
Just run npm install in order to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it did not open automatically).
In this chapter, we first defined two pages for our blog: the home page and a page for single posts. We also created a component for the HeaderBar. Afterward, we implemented routing by defining routes, links to the single posts, and links back to the main page. Finally, we used routing Hooks to implement dynamic navigation when creating a new post, and implemented a footer that shows the current URL.
Routing is very important, and is used in almost every application. We now know how to define separate pages and how to link between them. Furthermore, we learned how to dynamically navigate between pages using Hooks. We also learned how to access routing information with Hooks for more advanced use cases.
There are many more things that the Navi library can do. However, this book focuses on Hooks, so most features of Navi are out of scope. For example, we can fetch data using Navi, implement error pages (for example, a 404 page), lazy loading and compose routes. Feel free to read up on those features in the official documentation of Navi.
In the next chapter, we are going to learn about the various Hooks that are provided by the React community: for input handling, for responsive design, to implement undo/redo, and to implement various data structures and React life cycle methods using Hooks. We are also going to learn where to find more Hooks provided by the community.
In order to recap what we have learned in this chapter, try answering the following questions:
If you are interested in more information about the concepts that we have learned in this chapter, take a look at the official documentation of the Navi library: https://frontarm.com/navi/en/.
In the previous chapter, we implemented routing using the Navi library. We started by implementing pages, then defining routes and static links. Finally, we implemented dynamic links and accessed route information using Hooks.
In this chapter, we are going to learn about various Hooks that are provided by the React community. These Hooks can be used to simplify input handling, and implement React life cycles in order to simplify migration from React class components. Furthermore, there are Hooks that implement various behaviors such as timers, checking if the client is online, hover and focus events, and data manipulation. Finally, we are going to learn about responsive design and implementing undo/redo functionality using Hooks.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter08.
Check out the following video to see the code in action:
Now, let's get started with the chapter.
A very common use case when dealing with Hooks, is to store the current value of an input field using State and Effect Hooks. We have already done this many times throughout this book.
The useInput Hook greatly simplifies this use case, by providing a single Hook that deals with the value variable of an input field. It works as follows:
import React from 'react'
import { useInput } from 'react-hookedup'
export default function App () {
const { value, onChange } = useInput('')
return <input value={value} onChange={onChange} />
}
This code will bind an onChange handler function and value to the input field. This means that whenever we enter text into the input field, the value will automatically be updated.
Additionally, there is a function that will clear the input field. This clear function is also returned from the Hook:
const { clear } = useInput('')
Calling the clear function will set the value to an empty value, and clear all text from the input field.
Furthermore, the Hook provides two ways to bind an input field:
The bind and bindToInput objects can be used with the spread operator, as follows:
import React from 'react'
import { useInput } from 'react-hookedup'
const ToggleButton = ({ value, onChange }) => { ... } // custom component that renders a toggle button
export default function App () {
const { bind, bindToInput } = useInput('')
return (
<div>
<input {...bindToInput} />
<ToggleButton {...bind} />
</div>
)
}
As we can see, for the input field we can use the {...bindToInput} props to assign the value and onChange functions. For ToggleButton, we need to use the {...bind} props instead, because we are not dealing with input events here, and the value is directly passed to the change handler (not via e.target.value).
Now that we have learned about the Input Hook, we can move on to implementing it in our blog app.
Now that we have learned about the Input Hook, and how it simplifies dealing with the input field state, we are going to implement Input Hooks in our blog app.
First, we have to install the react-hookedup library in our blog app project:
> npm install --save react-hookedup
We are now going to implement Input Hooks in the following components:
Let's get started implementing Input Hooks.
We have two input fields in the Login component: the Username and Password fields. We are now going to replace the State Hooks with Input Hooks.
Let's start implementing Input Hooks in the Login component now:
import { useInput } from 'react-hookedup'
const [ username, setUsername ] = useState('')
It is replaced with an Input Hook, as follows:
const { value: username, bindToInput: bindUsername } = useInput('')
const [ password, setPassword ] = useState('')
It is replaced with an Input Hook, as follows:
const { value: password, bindToInput: bindPassword } = useInput('')
function handleUsername (evt) {
setUsername(evt.target.value)
}
function handlePassword (evt) {
setPassword(evt.target.value)
}
<input type="text" value={username} {...bindUsername} name="login-username" id="login-username" />
<input type="password" value={password} {...bindPassword} name="login-password" id="login-password" />
The login functionality will still work in exactly the same way as before, but we are now using the much more concise Input Hook, instead of the generic State Hook. We also do not have to define the same kind of handler function for each input field anymore. As we can see, using community Hooks can greatly simplify the implementation of common use-cases, such as input handling. We are now going to repeat the same process for the Register component.
The Register component works similarly to the Login component. However, it has three input fields: Username, Password, and Repeat Password.
Let's implement Input Hooks in the Register component now:
import { useInput } from 'react-hookedup'
const [ username, setUsername ] = useState('')
const [ password, setPassword ] = useState('')
const [ passwordRepeat, setPasswordRepeat ] = useState('')
They are replaced with the corresponding Input Hooks:
const { value: username, bindToInput: bindUsername } = useInput('')
const { value: password, bindToInput: bindPassword } = useInput('')
const { value: passwordRepeat, bindToInput: bindPasswordRepeat } = useInput('')
function handleUsername (evt) {
setUsername(evt.target.value)
}
function handlePassword (evt) {
setPassword(evt.target.value)
}
function handlePasswordRepeat (evt) {
setPasswordRepeat(evt.target.value)
}
<input type="text" value={username} {...bindUsername} name="register-username" id="register-username" />
<input type="password" value={password} {...bindPassword} name="register-password" id="register-password" />
<input type="password" value={passwordRepeat} {...bindPasswordRepeat} name="register-password-repeat" id="register-password-repeat/>
The register functionality will also still work in the same way, but now using Input Hooks. Next up is the CreatePost component, where we are going to implement Input Hooks as well.
The CreatePost component uses two input fields: one for the title, and one for the content. We are going to replace both of them with Input Hooks.
Let's implement Input Hooks in the CreatePost component now:
import { useInput } from 'react-hookedup'
const [ title, setTitle ] = useState('')
const [ content, setContent ] = useState('')
We replace them with the corresponding Input Hooks:
const { value: title, bindToInput: bindTitle } = useInput('')
const { value: content, bindToInput: bindContent } = useInput('')
function handleTitle (evt) {
setTitle(evt.target.value)
}
function handleContent (evt) {
setContent(evt.target.value)
}
<input type="text" value={title} {...bindTitle} name="create-title" id="create-title" />
</div>
<textarea value={content} {...bindContent} />
The create post functionality will also work in the same way with Input Hooks.
The example code can be found in the Chapter08/chapter8_1 folder.
Just run npm install in order to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it does not open automatically).
As we have learned in the previous chapters, we can use the useEffect Hook to model most of React's life cycle methods. However, if you prefer dealing with React life cycle directly, instead of using Effect Hooks, there is a library called react-hookedup, which provides various Hooks, including Hooks for the various React life cycles. Additionally, the library provides a merging State Hook, which works similarly to this.setState() in React's class components.
The useOnMount Hook has a similar effect to the componentDidMount life cycle. It is used as follows:
import React from 'react'
import { useOnMount } from 'react-hookedup'
export default function UseOnMount () {
useOnMount(() => console.log('mounted'))
return <div>look at the console :)</div>
}
The preceding code will output mounted to the console when the component gets mounted (when the React component is rendered for the first time). It will not be called again when the component re-renders due to, for example, a prop change.
Alternatively, we could just use a useEffect Hook with an empty array as the second argument, which will have the same effect:
import React, { useEffect } from 'react'
export default function OnMountWithEffect () {
useEffect(() => console.log('mounted with effect'), [])
return <div>look at the console :)</div>
}
As we can see, using an Effect Hook with an empty array as the second argument results in the same behavior as the useOnMount Hook or the componentDidMount life cycle method.
The useOnUnmount Hook has a similar effect to the componentWillUnmount life cycle. It is used as follows:
import React from 'react'
import { useOnUnmount } from 'react-hookedup'
export default function UseOnUnmount () {
useOnUnmount(() => console.log('unmounting'))
return <div>click the "unmount" button above and look at the console</div>
}
The preceding code will output unmounting to the console when the component gets unmounted (before the React component is removed from the DOM).
If you remember from Chapter 4, Using the Reducer and Effect Hooks, we can return a cleanup function from the useEffect Hook, which will be called when the component unmounts. This means that we could alternatively implement the useOnMount Hook using useEffect, as follows:
import React, { useEffect } from 'react'
export default function OnUnmountWithEffect () {
useEffect(() => {
return () => console.log('unmounting with effect')
}, [])
return <div>click the "unmount" button above and look at the console</div>
}
As we can see, using the cleanup function that is returned from an Effect Hook, with an empty array as the second argument, has the same effect as the useOnUnmount Hook, or the componentWillUnmount life cycle method.
The useLifecycleHooks Hook combines the previous two Hooks into one. We can combine the useOnMount and useOnUnmount Hooks as follows:
import React from 'react'
import { useLifecycleHooks } from 'react-hookedup'
export default function UseLifecycleHooks () {
useLifecycleHooks({
onMount: () => console.log('lifecycle mounted'),
onUnmount: () => console.log('lifecycle unmounting')
})
return <div>look at the console and click the button</div>
}
Alternatively, we could use the two Hooks separately:
import React from 'react'
import { useOnMount, useOnUnmount } from 'react-hookedup'
export default function UseLifecycleHooksSeparate () {
useOnMount(() => console.log('separate lifecycle mounted'))
useOnUnmount(() => console.log('separate lifecycle unmounting'))
return <div>look at the console and click the button</div>
}
However, if you have this kind of pattern, I would recommend simply using the useEffect Hook, as follows:
import React, { useEffect } from 'react'
export default function LifecycleHooksWithEffect () {
useEffect(() => {
console.log('lifecycle mounted with effect')
return () => console.log('lifecycle unmounting with effect')
}, [])
return <div>look at the console and click the button</div>
}
Using useEffect, we can put our whole effect into a single function, and then simply return a function for cleanup. This pattern is especially useful when we learn about making our own Hooks in the next chapters.
Effects make us think differently about React components. We do not have to think about the life cycle of a component at all. Instead, we think about effects, dependencies, and the cleanup of effects.
The useMergeState Hook works similarly to the useState Hook. However, it does not replace the current state, but instead merges the current state with the new state, just like this.setState() works in React class components.
The Merge State Hook returns the following objects:
For example, let's consider the following component:
import React, { useState } from 'react'
export default function MergeState () {
const [ state, setState ] = useState({ loaded: true, counter: 0 })
function handleClick () {
setState({ counter: state.counter + 1 })
}
return (
<div>
Count: {state.counter}
<button onClick={handleClick} disabled={!state.loaded}>+1</button>
</div>
)
}
As we can see, we have a simple counter app, showing the current count and a +1 button. The +1 button will only be enabled when the loaded value is set to true.
If we now click on the +1 button, counter will increase from 0 to 1, but the button will get disabled, because we have overwritten the current state object with a new state object.
To solve this problem, we would have to adjust the handleClick function as follows:
function handleClick () {
setState({ ...state, counter: state.counter + 1 })
}
Alternatively, we could use the useMergeState Hook in order to avoid this problem altogether, and get the same behavior that we had with this.setState() in class components:
import React from 'react'
import { useMergeState } from 'react-hookedup'
export default function UseMergeState () {
const { state, setState } = useMergeState({ loaded: true, counter: 0 })
As we can see, by using the useMergeState Hook, we can reproduce the same behavior that we had with this.setState() in class components. So, we do not need to use spread syntax anymore. However, often, it is better to simply use multiple State Hooks or a Reducer Hook instead.
The example code can be found in the Chapter08/chapter8_2 folder.
Just run npm install in order to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it does not open automatically).
In addition to life cycle Hooks, react-hookedup also provides Hooks for timers, checking the network status, and various other useful Hooks for dealing with, for example, arrays and input fields. We are now going to cover the rest of the Hooks that react-hookedup provides.
These Hooks are as follows:
The usePrevious Hook is a simple Hook that lets us get the previous value of a prop or Hook value. It will always store and return the previous value of any given variable, and it works as follows:
import React, { useState } from 'react'
import { usePrevious } from 'react-hookedup'
export default function UsePrevious () {
const [ count, setCount ] = useState(0)
const prevCount = usePrevious(count)
function handleClick () {
setCount(count + 1)
}
return (
<div>
Count was {prevCount} and is {count} now.
<button onClick={handleClick}>+1</button>
</div>
)
}
The previously defined component will first show Count was and is 0 now., because the default value for the Previous Hook is null. When clicking the button once, it will show the following: Count was 0 and is 1 now..
The react-hookedup library also provides Hooks for dealing with timers. If we simply create a timer using setTimeout or setInterval in our component, it will get instantiated again every time the component is re-rendered. This not only causes bugs and unpredictability, but can also cause a memory leak if the old timers are not freed properly. Using timer Hooks, we can avoid these problems completely, and easily use intervals and timeouts.
The following timer Hooks are provided by the library:
The useInterval Hook can be used just like setInterval. We are now going to implement a small counter that counts the number of seconds since mounting the component:
import React, { useState } from 'react'
import { useInterval } from 'react-hookedup'
export default function UseInterval () {
const [ count, setCount ] = useState(0)
useInterval(() => setCount(count + 1), 1000)
return <div>{count} seconds passed</div>
}
Alternatively, we could use an Effect Hook in combination with setInterval, instead of the useInterval Hook, as follows:
import React, { useState, useEffect } from 'react'
export default function IntervalWithEffect () {
const [ count, setCount ] = useState(0)
useEffect(() => {
const interval = setInterval(() => setCount(count + 1), 1000)
return () => clearInterval(interval)
})
return <div>{count} seconds passed</div>
}
As we can see, the useInterval Hook makes our code much more concise and easily readable.
The useTimeout Hook can be used just like setTimeout. We are now going to implement a component that triggers after 10 seconds have passed:
import React, { useState } from 'react'
import { useTimeout } from 'react-hookedup'
export default function UseTimeout () {
const [ ready, setReady ] = useState(false)
useTimeout(() => setReady(true), 10000)
return <div>{ready ? 'ready' : 'waiting...'}</div>
}
Alternatively, we could use an Effect Hook in combination with setTimeout, instead of the useTimeout Hook, as follows:
import React, { useState, useEffect } from 'react'
export default function TimeoutWithEffect () {
const [ ready, setReady ] = useState(false)
useEffect(() => {
const timeout = setTimeout(() => setReady(true), 10000)
return () => clearTimeout(timeout)
})
return <div>{ready ? 'ready' : 'waiting...'}</div>
}
As we can see, the useTimeout Hook makes our code much more concise and easily readable.
In some web apps, it makes sense to implement an offline mode; for example, if we want to be able to edit and save drafts for posts locally, and sync them to the server whenever we are online again. To be able to implement this use case, we can use the useOnlineStatus Hook.
The Online Status Hook returns an object with an online value, which contains true if the client is online; otherwise, it contains false. It works as follows:
import React from 'react'
import { useOnlineStatus } from 'react-hookedup'
export default function App () {
const { online } = useOnlineStatus()
return <div>You are {online ? 'online' : 'offline'}!</div>
}
The previous component will display You are online!, when an internet connection is available, or You are offline!, otherwise.
We could then use a Previous Hook, in combination with an Effect Hook, in order to sync data to the server when we are online again:
import React, { useEffect } from 'react'
import { useOnlineStatus, usePrevious } from 'react-hookedup'
export default function App () {
const { online } = useOnlineStatus()
const prevOnline = usePrevious(online)
useEffect(() => {
if (prevOnline === false && online === true) {
alert('syncing data')
}
}, [prevOnline, online])
return <div>You are {online ? 'online' : 'offline'}!</div>
}
Now, we have an Effect Hook that triggers whenever the value of online changes. It then checks whether the previous value of online was false, and the current one is true. If that is the case, it means we were offline, and are now online again, so we need to sync our updated data to the server.
As a result, our app will show an alert displaying syncing data when we go offline and then online again.
The react-hookedup library provides various utility Hooks for dealing with data. These Hooks simplify dealing with common data structures and provide an abstraction over the State Hook.
The following data manipulation Hooks are provided:
The useBoolean Hook is used to deal with toggling boolean values (true/false), and provides functions to set the value to true/false, and a toggle function to toggle the value.
The Hook returns an object with the following:
The Boolean Hook works as follows:
import React from 'react'
import { useBoolean } from 'react-hookedup'
export default function UseBoolean () {
const { toggle, value } = useBoolean(false)
return (
<div>
<button onClick={toggle}>{value ? 'on' : 'off'}</button>
</div>
)
}
The button will initially be rendered with the text off. When clicking the button, it will show the text on. When clicking again, it will be off again.
The useArray Hook is used to easily deal with arrays, without having to use the rest/spread syntax.
The Array Hook returns an object with the following:
It works as follows:
import React from 'react'
import { useArray } from 'react-hookedup'
export default function UseArray () {
const { value, add, clear, removeIndex } = useArray(['one', 'two', 'three'])
return (
<div>
<p>current array: {JSON.stringify(value)}</p>
<button onClick={() => add('test')}>add element</button>
<button onClick={() => removeIndex(0)}>remove first element</button>
<button onClick={() => clear()}>clear elements</button>
</div>
)
}
As we can see, using the useArray Hook makes dealing with arrays much simpler.
The useCounter Hook can be used to define various kinds of counters. We can define a lower/upper limit, specify whether the counter should loop or not, and specify the step amount by which we increase/decrease the counter. Furthermore, the Counter Hook provides functions in order to increase/decrease the counter.
It accepts the following configuration options:
It returns the following object:
The Counter Hook can be used as follows:
import React from 'react'
import { useCounter } from 'react-hookedup'
export default function UseCounter () {
const { value, increase, decrease } = useCounter(0, { upperLimit: 3, lowerLimit: 0, loop: true })
return (
<div>
<b>{value}</b>
<button onClick={increase}>+</button>
<button onClick={decrease}>-</button>
</div>
)
}
As we can see, the Counter Hook makes implementing counters much simpler.
Sometimes, we want to check whether the user has hovered over an element or focused on an input field. To do so, we can use the Focus and Hover Hooks that are provided by the react-hookedup library.
The library provides two Hooks for these features:
In order to know whether an element is currently focused, we can use the useFocus Hook as follows:
import React from 'react'
import { useFocus } from 'react-hookedup'
export default function UseFocus () {
const { focused, bind } = useFocus()
return (
<div>
<input {...bind} value={focused ? 'focused' : 'not focused'} />
</div>
)
}
As we can see, the Focus Hook makes it much easier to handle focus events. There is no need to define our own handler functions anymore.
In order to know whether the user is currently hovering over an element, we can use the useHover Hook, as follows:
import React from 'react'
import { useHover } from 'react-hookedup'
export default function UseHover () {
const { hovered, bind } = useHover()
return (
<div {...bind}>Hover me {hovered && 'THANKS!!!'}</div>
)
}
As we can see, the Hover Hook makes it much easier to handle hover events. There is no need to define our own handler functions anymore.
The example code can be found in the Chapter08/chapter8_3 folder.
Just run npm install in order to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it does not open automatically).
In web apps, it is often important to have a responsive design. Responsive design makes your web app render well on various devices and window/screen sizes. Our blog app might be viewed on a desktop, a mobile phone, a tablet, or maybe even a very large screen, such as a TV.
Often, it makes the most sense to simply use CSS media queries for responsive design. However, sometimes that is not possible, for example, when we render elements within a canvas or Web Graphics Library (WebGL). Sometimes, we also want to use the window size in order to decide whether to load a component or not, instead of simply rendering it and then hiding it via CSS later.
The @rehooks/window-size library provides the useWindowSize Hook, which returns the following values:
To show the difference between outerWidth/outerHeight, and innerWidth/innerHeight, take a look at the following diagram:
As we can see, innerHeight and innerWidth specify the innermost part of the browser window, while outerHeight and outerWidth specify the full dimensions of the browser window, including the URL bar, scroll bars, and so on.
We are now going to hide components based on the window size in our blog app.
In our blog app, we are going to hide the UserBar and ChangeTheme components completely when the screen size is very small so that, when reading a post on a mobile phone, we can focus on the content.
Let's get started implementing the Window Size Hook:
> npm install --save @rehooks/window-size
import useWindowSize from '@rehooks/window-size'
const { innerWidth } = useWindowSize()
const mobilePhone = innerWidth < 640
{!mobilePhone && <ChangeTheme theme={theme} setTheme={setTheme} />}
{!mobilePhone && <br />}
{!mobilePhone && <React.Suspense fallback={"Loading..."}>
<UserBar />
</React.Suspense>}
{!mobilePhone && <br />}
If we now resize our browser window to a width smaller than 640 pixels, we can see that the ChangeTheme and UserBar components will not be rendered anymore:
Using the Window Size Hook, we can avoid rendering elements on smaller screen sizes.
The example code can be found in the Chapter08/chapter8_4 folder.
Just run npm install in order to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it does not open automatically).
In some apps, we want to implement undo/redo functionality, which means that we can go back and forth in the state of our app. For example, if we have a text editor in our blog app, we want to provide a feature to undo/redo changes. If you learned about Redux, you might already be familiar with this kind of functionality. Since React now provides a Reducer Hook, we can reimplement the same functionality using only React. The use-undo library provides exactly this functionality.
The useUndo Hook takes the default state object as an argument, and returns an array with the following contents: [ state, functions ].
The state object looks as follows:
The functions object returns various functions to interact with the Undo Hook:
We are now going to implement undo/redo functionality in our post editor.
In the simple post editor of our blog app, we have a textarea where we can write the contents of a blog post. We are now going to implement the useUndo Hook there, so that we can undo/redo any changes that we made to the text:
> npm install --save use-undo
import useUndo from 'use-undo'
const { value: content, bindToInput: bindContent } = useInput('')
Replace it with the useUndo Hook, as follows. We set the default state to ''. We also save the state to undoContent, and get the setContent, undo, and redo functions, as well as the canUndo and canRedo values:
const [ undoContent, {
set: setContent,
undo,
redo,
canUndo,
canRedo
} ] = useUndo('')
const content = undoContent.present
function handleContent (e) {
setContent(e.target.value)
}
<textarea value={content} onChange={handleContent} />
<button type="button" onClick={undo} disabled={!canUndo}>Undo</button>
<button type="button" onClick={redo} disabled={!canRedo}>Redo</button>
Now, after entering text we can press Undo to remove one character at a time, and Redo to add the characters again. Next, we are going to implement debouncing, which means that our changes will only be added to the undo history after a certain amount of time, not after every character that we entered.
As we have seen in the previous section, when we press Undo, it undoes a single character at a time. Sometimes, we do not want to store every change in our undo history. To avoid storing every change, we need to implement debouncing, which means that the function that stores our content to the undo history is only called after a certain amount of time.
The use-debounce library provides the useDebounce Hook, which can be used, as follows, for simple values:
const [ text, setText ] = useState('')
const [ value ] = useDebounce(text, 1000)
Now, if we change the text via setText, the text value will be updated instantly, but the value variable will only be updated after 1000 ms (1 second).
However, for our use case, this is not enough. We are going to need debounced callbacks in order to implement debouncing in combination with use-undo. The use-debounce library also provides the useDebouncedCallback Hook, which can be used as follows:
const [ text, setText ] = useState('')
const [ debouncedSet, cancelDebounce ] = useDebouncedCallback(
(value) => setText(value),
1000
)
Now, if we call debouncedSet('text'), the text value will be updated after 1000 ms (1 second). If debouncedSet is called multiple times, the timeout will get reset every time, so that only after 1000 ms of no further calls to the debouncedSet function, the setText function will be called. Next, we are going to move on to implementing debouncing in our post editor.
Now that we have learned about debouncing, we are going to implement it in combination with the Undo Hook in our post editor, as follows:
> npm install --save use-debounce
import React, { useState, useContext, useEffect } from 'react'
import { useDebouncedCallback } from 'use-debounce'
const [ content, setInput ] = useState('')
const content = undoContent.present
const [ setDebounce, cancelDebounce ] = useDebouncedCallback(
(value) => {
setContent(value)
},
200
)
useEffect(() => {
cancelDebounce()
setInput(undoContent.present)
}, [undoContent])
function handleContent (e)
const { value } = e.target
setInput(value)
setDebounce(value)
}
As a result, we instantly set the input value, but we do not store anything to the undo history yet. After the debouncing callback triggers (after 200 ms), we store the current value to the undo history. Whenever the undo state updates, for example, when we press the Undo/Redo buttons, we cancel the current debouncing to avoid overwriting the value after undoing/redoing. Then, we set the content value to the new present value of the Undo Hook.
If we now type some text into our editor, we can see that the Undo button only activates after a while. It then looks like this:
If we now press the Undo button, we can see that we will not undo character by character, but more text at once. For example, if we press Undo three times, we get the following result:
As we can see, Undo/Redo and debouncing now work perfectly fine!
The example code can be found in the Chapter08/chapter8_5 folder.
Just run npm install in order to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it does not open automatically).
There are many other Hooks that are provided by the community. You can find a searchable list of various Hooks on the following page: https://nikgraf.github.io/react-hooks/.
To give you an idea of which other Hooks are out there, the following features are provided by community Hooks. We now list a couple more interesting Hooks provided by the community. Of course, there are many more Hooks to be found:
In this chapter, we first learned about the react-hookedup library. We used this library to simplify input handling with Hooks in our blog app. Then, we had a look at implementing various React life cycles with Hooks. Next, we covered various useful Hooks, such as the usePrevious Hook, Interval/Timeout Hooks, the Online Status Hook, data manipulation Hooks, and the Focus and Hover Hooks. Afterward, we covered responsive design using Hooks, by not rendering certain components on mobile phones. Finally, we learned about implementing undo/redo functionality and debouncing using Hooks.
Using community Hooks is a very important skill, as React only provides a handful of Hooks out of the box. In real applications, you will probably be using many Hooks that are provided by the community, from various libraries and frameworks. We also learned about various community Hooks that will make our life so much easier when writing React applications.
In the next chapter, we will gain an in-depth knowledge about the rules of Hooks, which are important to know before we can start writing our own Hooks.
In order to recap what we have learned in this chapter, try answering the following questions:
If you are interested in more information about the concepts that we have learned in this chapter, take a look at the following reading material:
In the previous chapter, we learned about using various Hooks that have been developed by the React community, as well as where to find more of them. We learned about replacing React life cycle methods with Hooks, utility and data management Hooks, responsive design with Hooks, and implementing undo/redo functionality with Hooks. Finally, we learned where to find other Hooks.
In this chapter, we are going to learn about everything that there is to know about using Hooks, and what to watch out for when using and developing our own Hooks. Hooks have certain limitations regarding the order that they are called. Violating the rules of Hooks can cause bugs or unexpected behavior, so we need to make sure that we learn and enforce the rules.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter09.
Check out the following video to see the code in action:
Now, let's get started with the chapter.
Hooks should only be called in React function components or custom Hooks. They cannot be used in class components or regular JavaScript functions.
Hooks can be called at the top level of the following:
As we can see, Hooks are mostly normal JavaScript functions, except that they rely on being defined in a React function component. Of course, custom Hooks that use other Hooks can be defined outside of React function components, but when using Hooks, we always need to make sure that we call them inside a React function component. Next, we are going to learn about the rules regarding the order of Hooks.
Only call Hooks at the top level/beginning of function components or custom Hooks.
Do not call Hooks inside conditions, loops, or nested functions—doing so changes the order of Hooks, which causes bugs. We have already learned that changing the order of Hooks causes the state to get mixed up between multiple Hooks.
In Chapter 2, Using the State Hook, we learned that we cannot do the following:
const [ enableFirstName, setEnableFirstName ] = useState(false)
const [ name, setName ] = enableFirstName
? useState('')
: [ '', () => {} ]
const [ lastName, setLastName ] = useState('')
We rendered a checkbox and two input fields for the firstName and lastName, and then we entered some text in the lastName field:
At the moment, the order of Hooks is as follows:
Next, we clicked on the checkbox to enable the firstName field. Doing so changed the order of Hooks, because now our Hook definitions look like this:
Since React solely relies on the order of Hooks to manage their state, the firstName field is now the second Hook, so it gets the state from the lastName field:
If we use the real useState Hook from React in example 2 Can we define conditional Hooks? from Chapter 2, Using the State Hook, we can see that React automatically detects when the order of Hooks has changed, and it will show a warning:
When running React in development mode, it will additionally crash with an Uncaught Invariant Violation error message when rendering more Hooks than in the previous render:
As we can see, changing the order of Hooks or conditionally enabling Hooks is not possible, as React internally uses the order of Hooks to keep track of which data belongs to which Hook.
There is a convention that Hook functions should always be prefixed with use, followed by the Hook name starting with a capital letter; for example: useState, useEffect, and useResource. This is important, because otherwise we would not know which JavaScript functions are Hooks, and which are not. Especially when enforcing the rules of Hooks, we need to know which functions are Hooks so that we can make sure they are not being called conditionally or in loops.
As we can see, naming conventions are not technically required, but they make life a lot easier for developers. Knowing the difference between normal functions and Hooks makes it very easy to automatically enforce the rules of Hooks. In the next section, we are going to learn how to automatically enforce the rules using the eslint tool.
If we stick to the convention of prefixing Hook functions with use, we can automatically enforce the other two rules:
In order to enforce the rules automatically, React provides an eslint plugin called eslint-plugin-react-hooks, which will automatically detect when Hooks are used, and will ensure that the rules are not broken. ESLint is a linter, which is a tool that analyzes source code and finds problems such as stylistic mistakes, potential bugs, and programming errors.
We are now going to set up the React Hooks eslint plugin to automatically enforce the rules of Hooks.
Let's start installing and enabling the eslint plugin:
> npm install --save-dev eslint-plugin-react-hooks
{
"extends": "react-app",
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}
}
"scripts": {
"lint": "npx eslint src/",
Now, we can execute npm run lint, and we are going to see that there are 5 warnings and 0 errors:
We will now try to break the rules of Hooks; for example, by editing src/user/Login.js and making the second Input Hook conditional:
const { value: password, bindToInput: bindPassword } = loginFailed ? useInput('') : [ '', () => {} ]
When we execute npm run lint again, we can see that there is now an error:
As we can see, eslint helps us by forcing us to stick to the rules of Hooks. The linter will throw an error when we violate any rules, and show warnings when Effect Hooks have missing dependencies. Listening to eslint will help us to avoid bugs and unexpected behavior, so we should never ignore its errors or warnings.
The example code can be found in the Chapter09/chapter9_1 folder.
Just run npm install in order to install all dependencies and execute npm run lint to run the linter.
In addition to enforcing the rules of Hooks, we are also checking whether all the variables that are used in an Effect Hook are passed to its dependency array. This exhaustive dependencies rule ensures that whenever something that is used inside the Effect Hook changes (a function, value, and so on), the Hook will trigger again.
As we have seen in the previous section, there are a couple warnings related to the exhaustive dependencies rule when running the linter with npm run lint. Often, it has to do with the dispatch function or other functions not being part of the dependency array. Usually, these functions should not change, but we can never be sure, so it is better to just add them to the dependencies.
As the exhaustive dependencies rule is quite simple and straightforward to fix, we can automatically let eslint fix it.
To do so, we need to pass the --fix flag to eslint. Using npm run, we can pass flags by using an additional -- as a separator, as follows:
> npm run lint -- --fix
After running the preceding command, we can run npm run lint again, and we are going to see that all warnings have automatically been fixed:
As we can see, eslint not only warns us about problems, it can even fix some of them automatically for us!
The example code can be found in the Chapter09/chapter9_2 folder.
Just run npm install in order to install all dependencies and execute npm run lint to run the linter.
In this chapter, we first learned about two rules of Hooks: that we should only call Hooks from React function components, and that we need to ensure that the order of Hooks stays the same. Furthermore, we learned about the naming convention of Hooks, and that they should always start with the use prefix. Then, we learned how to enforce the rules of Hooks using eslint. Finally, we learned about useEffect dependencies, and how to fix missing dependencies automatically using eslint.
Knowing about the rules of Hooks, and enforcing them, is very important in order to avoid bugs and unexpected behavior. These rules will be especially important when creating our own Hooks. Now that we have a good grasp on how Hooks work, including their rules and conventions, in the next chapter, we are going to learn how to create our own Hooks!
In order to recap what we have learned in this chapter, try answering the following questions:
If you are interested in more information about the concepts that we have learned in this chapter, take a look at the following reading material:
In the previous chapter, we learned about the limitations and rules of Hooks. We learned where to call Hooks, why the order of Hooks matters, and the naming conventions for Hooks. Finally, we learned about enforcing the rules of Hooks and dealing with useEffect dependencies.
In this chapter, we are going to learn how to create custom Hooks by extracting existing code from our components. We are also going to learn how to use custom Hooks and how Hooks can interact with each other. Then, we are going to learn how to write tests for our custom Hooks. Finally, we are going to learn about the full React Hooks API.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found on GitHub: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter10.
Check out the following video to see the code in action:
Now let's get started with the chapter.
After getting a good grasp on the concept of Hooks by learning about the State and Effect Hooks, community Hooks, and the rules of Hooks, we are now going to build our own Hooks. We start by extracting custom Hooks from existing functionalities of our blog application. Usually, it makes the most sense to first write the component, and then later extract a custom Hook from it if we notice that we use similar code across multiple components. Doing so avoids prematurely defining custom Hooks and making our project unnecessarily complex.
We are going to extract the following Hooks in this section:
In many components, we use the ThemeContext to style our blog app. Functionality that is used across multiple components is usually a good opportunity for creating a custom Hook. As you might have noticed, we often do the following:
import { ThemeContext } from '../contexts'
export default function SomeComponent () {
const theme = useContext(ThemeContext)
// ...
We could abstract this functionality into a useTheme Hook, which will get the theme object from the ThemeContext.
Let's start creating a custom useTheme Hook:
import { useContext } from 'react'
import { ThemeContext } from '../contexts'
export default function useTheme () {
return useContext(ThemeContext)
}
As we can see, custom Hooks can be quite simple. In this case, the custom Hook only returns a Context Hook with the ThemeContext passed to it. Nevertheless, this makes our code more concise and easier to change later. Furthermore, by using a useTheme Hook, it is clear that we want to access the theme, which means our code will be easier to read and reason about.
Another thing that we often do is access the global state. For example, some components need the user state and some need the posts state. To abstract this functionality, which will also make it easier to adjust the state structure later on, we can create custom Hooks to get certain parts of the state:
Repeating a similar process to what we did for the useTheme Hook, we import the useContext Hook from React and the StateContext. However, instead of returning the result of the Context Hook, we now pull out the state object via destructuring and then return state.user.
Create a new src/hooks/useUserState.js file with the following contents:
import { useContext } from 'react'
import { StateContext } from '../contexts'
export default function useUserState () {
const { state } = useContext(StateContext)
return state.user
}
Similarly to the useTheme Hook, the useUserState Hook makes our code more concise, easier to change later, and improves readability.
We repeat the same process for the posts state. Create a new src/hooks/usePostsState.js file with the following contents:
import { useContext } from 'react'
import { StateContext } from '../contexts'
export default function usePostsState () {
const { state } = useContext(StateContext)
return state.posts
}
Similarly to the useTheme and useUserState Hooks, the usePostsState Hook makes our code more concise, easier to change later, and improves readability.
In many components, we need the dispatch function to do certain actions, so we often have to do the following:
import { StateContext } from '../contexts'
export default function SomeComponent () {
const { dispatch } = useContext(StateContext)
// ...
We can abstract this functionality into a useDispatch Hook, which will get the dispatch function from our global state context. Doing this will also make it easier to replace the state management implementation later on. For example, later on, we could replace our simple Reducer Hook with a state management library such as Redux or MobX.
Let's define the useDispatch Hook now using the following steps:
import { useContext } from 'react'
import { StateContext } from '../contexts'
export default function useDispatch (context = StateContext) {
const { dispatch } = useContext(context)
return dispatch
}
As we can see, creating a custom Dispatch Hook makes our code easier to change later on, as we only need to adjust the dispatch function in one place.
We can also create Hooks for the various API calls. Putting these Hooks in a single file allows us to adjust the API calls easily later on. We are going to prefix our custom API Hooks with useAPI so it is easy to tell which functions are API Hooks.
Let's create custom Hooks for our API now using the following steps:
import { useResource } from 'react-request-hook'
export function useAPILogin () {
return useResource((username, password) => ({
url: `/login/${encodeURI(username)}/${encodeURI(password)}`,
method: 'get'
}))
}
export function useAPIRegister () {
return useResource((username, password) => ({
url: '/users',
method: 'post',
data: { username, password }
}))
}
export function useAPICreatePost () {
return useResource(({ title, content, author }) => ({
url: '/posts',
method: 'post',
data: { title, content, author }
}))
}
export function useAPIThemes () {
return useResource(() => ({
url: '/themes',
method: 'get'
}))
}
As we can see, having all API-related functionality in one place makes it easier to adjust our API code later on.
We are now going to create a slightly more advanced Hook for debounced undo functionality. We already implemented this functionality in the CreatePost component. Now, we are going to extract this functionality into a custom useDebouncedUndo Hook.
Let's create the useDebouncedUndo Hook with the following steps:
import { useState, useEffect, useCallback } from 'react'
import useUndo from 'use-undo'
import { useDebouncedCallback } from 'use-debounce'
export default function useDebouncedUndo (timeout = 200) {
const [ content, setInput ] = useState('')
const [ undoContent, { set: setContent, ...undoRest } ] = useUndo('')
const [ setDebounce, cancelDebounce ] = useDebouncedCallback(
(value) => {
setContent(value)
},
timeout
)
useEffect(() => {
cancelDebounce()
setInput(undoContent.present)
}, [cancelDebounce, undoContent])
const setter = useCallback(function setterFn (value) {
setInput(value)
setDebounce(value)
}, [ setInput, setDebounce ])
return [ content, setter, undoRest ]
}
Creating a custom Hook for debounced undo means that we can reuse that functionality across multiple components. We could even provide this Hook as a public library, allowing others to easily implement debounced undo/redo functionality.
After creating all our custom Hooks, we are going to create an index.js file in our Hooks directory and re-export our Hooks there, so that we can import our custom Hooks as follows: import { useTheme } from './hooks'
Let's export all our custom Hooks now using the following steps:
import useTheme from './useTheme'
import useDispatch from './useDispatch'
import usePostsState from './usePostsState'
import useUserState from './useUserState'
import useDebouncedUndo from './useDebouncedUndo'
export { useTheme, useDispatch, usePostsState, useUserState, useDebouncedUndo }
export * from './api'
Now that we have exported all our custom Hooks, we can simply import Hooks directly from the hooks folder, making it easier to import multiple custom Hooks at once.
The example code can be found in the Chapter10/chapter10_1 folder.
Just run npm install to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it does not open automatically).
After creating our custom Hooks, we can now start using them throughout our blog application. Using custom Hooks is quite straightforward as they are similar to community Hooks. Just like all other Hooks, custom Hooks are simply JavaScript functions.
We created the following Hooks:
In this section, we are going to refactor our app to use all of our custom Hooks.
Instead of using the useContext Hook with the ThemeContext, we can now use the useTheme Hook directly! If we end up changing the theming system later on, we can simply modify the useTheme Hook and our new system will be implemented throughout our application.
Let's refactor our app to use the useTheme Hook:
import { useTheme } from './hooks'
const { primaryColor } = useTheme()
import { useTheme } from './hooks'
const { secondaryColor } = useTheme()
As we can see, using a custom Hook makes our code much more concise and easier to read. We now move on to using the global state Hooks.
Similarly to what we did with the ThemeContext, we can also replace our state Context Hooks with the usePostsState, useUserState, and useDispatch Hooks. This is optimal if we want to change the state logic later. For example, if our state grows and we want to use a more sophisticated system such as Redux or MobX, then we can simply adjust the existing Hooks and everything will work the same way as before.
In this section, we are going to adjust the following components:
First, we are going to adjust the UserBar component. Here, we can use the useUserState Hook by following these steps:
import { useUserState } from '../hooks'
const { state } = useContext(StateContext)
const { user } = state
const user = useUserState()
Now the UserBar component makes use of our custom Hook instead of directly accessing the user state.
Next, we are going to adjust the Login component, where we can use the useDispatch Hook. This process is outlined in the following steps:
import { useDispatch } from '../hooks'
const { dispatch } = useContext(StateContext)
const dispatch = useDispatch()
Now the Login component makes use of our custom Hook instead of directly accessing the dispatch function. Next, we are going to adjust the Register component.
Similarly to the Login component, we can also use the useDispatch Hook in the Register component, as shown in the following steps:
import { useDispatch } from '../hooks'
const dispatch = useDispatch()
Now the Register component also makes use of our custom Hook instead of directly accessing the dispatch function.
Then, we are going to adjust the Logout component to use both the useUserState and the useDispatch Hooks with the following steps:
import { useDispatch, useUserState } from '../hooks'
const dispatch = useDispatch()
const user = useUserState()
Now the Logout component makes use of our custom Hooks instead of directly accessing the user state and the dispatch function.
Next we are going to adjust the CreatePost component, which is similar to what we did with the Logout component. This process is outlined in the following steps:
import { useUserState, useDispatch } from '../hooks'
const user = useUserState()
const dispatch = useDispatch()
Now the CreatePost component makes use of our custom Hooks instead of directly accessing the user state and the dispatch function.
Finally, we are going to use the usePostsState Hook to render the PostList component, as follows:
import { usePostsState } from '../hooks'
const posts = usePostsState()
Now the PostList component makes use of our custom Hook instead of directly accessing the posts state.
Next, we are going to replace all the useResource Hooks with our custom API Hooks. Doing so allows us to have all the API calls in one file so that we can easily adjust them later on, in case the API changes.
In this section, we are going to adjust the following components:
Let's get started.
First, we are going to adjust the ChangeTheme component and replace the Resource Hook, accessing /themes with our custom useAPIThemes Hook in the following steps:
import { useResource } from 'react-request-hook'
Replace it with our custom useAPIThemes Hook:
import { useAPIThemes } from './hooks'
const [ themes, getThemes ] = useAPIThemes()
Now the ChangeTheme component uses our custom API Hook to pull themes from the API.
Next, we are going to adjust the Register component with the following steps:
import { useDispatch, useAPIRegister } from '../hooks'
const [ user, register ] = useAPIRegister()
Now the Register component uses our custom API Hook to register users via the API.
Similar to the Register component, we are also going to adjust the Login component:
import { useDispatch, useAPILogin } from '../hooks'
const [ user, login ] = useAPILogin()
Now the Login component uses our custom API Hook to log in users via the API.
Finally, we are going to adjust the CreatePost component by following these steps:
import { useUserState, useDispatch, useAPICreatePost } from '../hooks'
const [ post, createPost ] = useAPICreatePost()
Now the CreatePost component uses our custom API Hook to create new posts via the API.
Finally, we are going to replace all debounced undo logic in the src/post/CreatePost.js file with our custom useDebouncedUndo Hook. Doing so will make our component code much cleaner and easier to read. Furthermore, we can reuse the same debounced undo functionality in other components later.
Let's get started using the Debounced Undo Hook in the CreatePost component by following these steps:
import { useUserState, useDispatch, useDebouncedUndo, useAPICreatePost } from '../hooks'
const [ content, setInput ] = useState('')
const [ undoContent, {
set: setContent,
undo,
redo,
canUndo,
canRedo
} ] = useUndo('')
const [ setDebounce, cancelDebounce ] = useDebouncedCallback(
(value) => {
setContent(value)
},
200
)
useEffect(() => {
cancelDebounce()
setInput(undoContent.present)
}, [cancelDebounce, undoContent])
Replace it with our custom useDebouncedUndo Hook, as follows:
const [ content, setContent, { undo, redo, canUndo, canRedo } ] = useDebouncedUndo()
function handleContent (e) {
const { value } = e.target
setInput(value)
setDebounce(value)
}
We can now use the setContent function provided by our custom Hook instead:
function handleContent (e) {
const { value } = e.target
setContent(value)
}
As you can see, our code is much cleaner, more concise, and easier to read now. Furthermore, we can reuse the Debounced Undo Hook in other components later on.
The example code can be found in the Chapter10/chapter10_2 folder.
Just run npm install to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it does not open automatically).
Our whole blog app now works in the same way as before, but it uses our custom Hooks! Until now, we have always had Hooks that encapsulated the whole logic, with only constant values being passed as arguments to our custom Hooks. However, we can also pass values of other Hooks into custom Hooks!
We are now going to create local Hooks, which means that they will be placed in the same file as the component, because they are not needed anywhere else. However, they will still make our code easier to read and maintain. These local Hooks will accept values from other Hooks as arguments.
The following local Hooks will be created:
Let's see how to create them in the following subsections.
First of all, we are going to extract the Effect Hook from our Login component to a separate useRegisterEffect Hook function. This function will accept the following values from other Hooks as arguments: user and dispatch.
Let's create a local Effect Hook for the Register component now using the following steps:
function useRegisterEffect (user, dispatch) {
useEffect(() => {
if (user && user.data) {
dispatch({ type: 'REGISTER', username: user.data.username })
}
}, [dispatch, user])
}
useRegisterEffect(user, dispatch)
As we can see, extracting an effect into a separate function makes our code easier to read and maintain.
Repeating a similar process to the local Register Effect Hook, we are also going to extract the Effect Hook from our Login component to a separate useLoginEffect Hook function. This function will accept the following values from other Hooks as arguments: user, dispatch, and setLoginFailed.
Let's create a local Hook for the Login component now using the following steps:
function useLoginEffect (user, dispatch, setLoginFailed) {
useEffect(() => {
if (user && user.data) {
if (user.data.length > 0) {
setLoginFailed(false)
dispatch({ type: 'LOGIN', username: user.data[0].username })
} else {
setLoginFailed(true)
}
}
if (user && user.error) {
setLoginFailed(true)
}
}, [dispatch, user, setLoginFailed])
}
useLoginEffect(user, dispatch, setLoginFailed)
As we can see, extracting an effect into a separate function makes our code easier to read and maintain.
The example code can be found in the Chapter10/chapter10_3 folder.
Just run npm install to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it does not open automatically).
Now our blog application makes full use of Hooks! We even defined custom Hooks for various functions to make our code more reusable, concise, and easy to read.
When defining custom Hooks, it makes sense to write tests for them to ensure they work properly, even when we change them later on or add more options.
To test our Hooks, we are going to use the Jest test runner, which is included in our create-react-app project. However, as a result of the rules of Hooks, we cannot call Hooks from the test functions because they can only be called inside the body of a function component.
Because we do not want to create a component specifically for each test, we are going to use the React Hooks Testing Library to test Hooks directly. This library actually creates a test component and provides various utility functions to interact with the Hook.
In addition to the React Hooks Testing Library, we also need a special renderer for React. To render React components to the DOM, we used react-dom; for tests, we can use the react-test-renderer. We are now going to install the React Hooks Testing Library and the react-test-renderer via npm:
> npm install --save-dev @testing-library/react-hooks react-test-renderer
The React Hooks Testing Library should be used in the following circumstances:
However, the library should not be used when a Hook is only defined and used in a single component (local Hooks).
In that case, we should test the component directly using the React Testing Library. However, testing React components is beyond the scope of this book. More information about testing components can be found on the library website: https://testing-library.com/docs/react-testing-library/intro.
First of all, we are going to test a very simple Hook that does not make use of contexts or asynchronous code such as timeouts. To do this, we are going to create a new Hook called useCounter. Then, we are going to test various parts of the Hook.
The following tasks will be covered in this section:
Let's get started now.
The useCounter Hook is going to provide a current count and functions to increment and reset the counter.
Let's create the useCounter Hook now using the following steps:
import { useState, useCallback } from 'react'
export default function useCounter (initialCount = 0) {
const [ count, setCount ] = useState(initialCount)
const increment = useCallback(() => setCount(count + 1), [])
const reset = useCallback(() => setCount(initialCount), [initialCount])
return { count, increment, reset }
}
Now that we have defined a simple Hook, we can start testing it.
Let's now write tests for the useCounter Hook we created, by following these steps:
import { renderHook, act } from '@testing-library/react-hooks'
import useCounter from './useCounter'
test('should use counter', () => {
const { result } = renderHook(() => useCounter())
expect(result.current.count).toBe(0)
expect(typeof result.current.increment).toBe('function')
})
As we can see, writing tests for Hook results is quite simple! When creating custom Hooks, especially when they are going to be used publicly, we should always write tests to ensure they work correctly.
Using the act function from the React Hooks Testing Library, we can execute functions from the Hook and then check the new result.
Let's now test actions of our Counter Hook:
test('should increment counter', () => {
const { result } = renderHook(() => useCounter())
act(() => result.current.increment())
expect(result.current.count).toBe(1)
})
As we can see, we can simply use the act function to trigger actions in our Hook and then test the value just like we did before.
We can also check the result before and after calling act and pass an initial value to our Hook.
Let's now test the initial value of our Hook:
test('should use initial value', () => {
const { result } = renderHook(() => useCounter(123))
expect(result.current.count).toBe(123)
act(() => result.current.increment())
expect(result.current.count).toBe(124)
})
As we can see, we can simply pass the initial value to the Hook and check whether the value is the same.
We are now going to simulate the props of a component changing. Imagine the initial value for our Hook is a prop and it is initially 0, which then changes to 123 later on. If we reset our counter now, it should reset to 123 and not 0. However, to do so, we need to force the re-rendering of our test component after changing the value.
Let's now test resetting and forcing the component to re-render:
test('should reset to initial value', () => {
let initial = 0
const { result, rerender } = renderHook(() => useCounter(initial))
initial = 123
rerender()
act(() => result.current.reset())
expect(result.current.count).toBe(123)
})
As we can see, the testing library creates a dummy component, which is used for testing the Hook. We can force this dummy component to re-render in order to simulate what would happen when props change in a real component.
Using the React Hooks Testing Library, we can also test more complex Hooks, such as Hooks making use of React context. Most of the custom Hooks we created for our blog app make use of contexts, so we are now going to test those. To test Hooks that use context, we first have to create a context wrapper, and then we can test the Hook.
In this section, we are going to perform the following:
Let's get started.
To be able to test the Theme Hook, we first have to set up the context and provide a wrapper component for the Hook's test component.
Let's now create the ThemeContextWrapper component:
import React from 'react'
import { ThemeContext } from '../contexts'
export function ThemeContextWrapper ({ children }) {
return (
<ThemeContext.Provider value={{ primaryColor: 'deepskyblue', secondaryColor: 'coral' }}>
{children}
</ThemeContext.Provider>
)
}
As we can see, a context wrapper simply returns a context provider component.
Now that we have defined the ThemeContextWrapper component, we can make use of it while testing the useTheme Hook.
Let's now test the useTheme Hook as outlined in the following steps:
import { renderHook } from '@testing-library/react-hooks'
import { ThemeContextWrapper } from './testUtils'
import useTheme from './useTheme'
test('should use theme', () => {
const { result } = renderHook(
() => useTheme(),
{ wrapper: ThemeContextWrapper }
)
expect(result.current.primaryColor).toBe('deepskyblue')
expect(result.current.secondaryColor).toBe('coral')
As we can see, after providing the context wrapper, we can test Hooks that use context just like we tested our simple Counter Hook.
For the other Hooks, which make use of the StateContext, we have to define another wrapper to provide the StateContext to the Hooks.
Let's now define the StateContextWrapper component with the following steps:
import React, { useReducer } from 'react'
import { StateContext, ThemeContext } from '../contexts'
import appReducer from '../reducers'
export function StateContextWrapper ({ children }) {
const [ state, dispatch ] = useReducer(appReducer, { user: '', posts: [], error: '' })
return (
<StateContext.Provider value={{ state, dispatch }}>
{children}
</StateContext.Provider>
)
}
As we can see, creating a context wrapper always works similarly. However, this time, we are also defining a Reducer Hook in our wrapper component.
Now that we have defined the StateContextWrapper, we can use it to test the useDispatch Hook.
Let's test the useDispatch Hook with the following steps:
import { renderHook } from '@testing-library/react-hooks'
import { StateContextWrapper } from './testUtils'
import useDispatch from './useDispatch'
test('should use dispatch', () => {
const { result } = renderHook(
() => useDispatch(),
{ wrapper: StateContextWrapper }
)
expect(typeof result.current).toBe('function')
})
As we can see, using a wrapper component always works the same way, even if we use other Hooks within the wrapper component.
Using the StateContextWrapper and the Dispatch Hook, we can now test the useUserState Hook by dispatching LOGIN and REGISTER actions and checking the result. To dispatch these actions, we use the act function from the testing library.
Let's test the useUserState Hook:
import { renderHook, act } from '@testing-library/react-hooks'
import { StateContextWrapper } from './testUtils'
import useDispatch from './useDispatch'
import useUserState from './useUserState'
test('should use user state', () => {
const { result } = renderHook(
() => useUserState(),
{ wrapper: StateContextWrapper }
)
expect(result.current).toBe('')
})
test('should update user state on login', () => {
const { result } = renderHook(
() => ({ state: useUserState(), dispatch: useDispatch() }),
{ wrapper: StateContextWrapper }
)
act(() => result.current.dispatch({ type: 'LOGIN', username: 'Test User' }))
expect(result.current.state).toBe('Test User')
})
test('should update user state on register', () => {
const { result } = renderHook(
() => ({ state: useUserState(), dispatch: useDispatch() }),
{ wrapper: StateContextWrapper }
)
act(() => result.current.dispatch({ type: 'REGISTER', username: 'Test User' }))
expect(result.current.state).toBe('Test User')
})
As we can see, we can access both the state object and the dispatch function from our tests.
Similarly to how we tested the useUserState Hook, we can also test the usePostsState Hook.
Let's test the usePostsState Hook now:
import { renderHook, act } from '@testing-library/react-hooks'
import { StateContextWrapper } from './testUtils'
import useDispatch from './useDispatch'
import usePostsState from './usePostsState'
test('should use posts state', () => {
const { result } = renderHook(
() => usePostsState(),
{ wrapper: StateContextWrapper }
)
expect(result.current).toEqual([])
})
test('should update posts state on fetch action', () => {
const { result } = renderHook(
() => ({ state: usePostsState(), dispatch: useDispatch() }),
{ wrapper: StateContextWrapper }
)
const samplePosts = [{ id: 'test' }, { id: 'test2' }]
act(() => result.current.dispatch({ type: 'FETCH_POSTS', posts: samplePosts }))
expect(result.current.state).toEqual(samplePosts)
})
test('should update posts state on insert action', () => {
const { result } = renderHook(
() => ({ state: usePostsState(), dispatch: useDispatch() }),
{ wrapper: StateContextWrapper }
)
const post = { title: 'Hello World', content: 'This is a test', author: 'Test User' }
act(() => result.current.dispatch({ type: 'CREATE_POST', ...post }))
expect(result.current.state[0]).toEqual(post)
})
As we can see, the tests for the posts state are similar to the user state, but with different actions being dispatched.
Sometimes, we need to test Hooks that do asynchronous actions. This means that we need to wait a certain period of time until we check the result. To implement tests for these kind of Hooks, we can use the waitForNextUpdate function from the React Hooks Testing Library.
Before we can test async Hooks, we need to learn about the new JavaScript construct called async/await.
Normal functions are defined as follows:
function doSomething () {
// ...
}
Normal anonymous functions are defined as follows:
() => {
// ...
}
Asynchronous functions are defined by adding the async keyword:
async function doSomething () {
// ...
}
We can also make anonymous functions asynchronous:
async () => {
// ...
}
Within async functions, we can use the await keyword to resolve promises. We do not have to do the following anymore:
() => {
fetchAPITodos()
.then(todos => dispatch({ type: FETCH_TODOS, todos }))
}
Instead, we can now do this:
async () => {
const todos = await fetchAPITodos()
dispatch({ type: FETCH_TODOS, todos })
}
As we can see, async functions make our code much more concise and easier to read! Now that we have learned about the async/await construct, we can start testing the useDebouncedUndo Hook.
We are going to use the waitForNextUpdate function to test debouncing in our useDebouncedUndo Hook by following these steps:
import { renderHook, act } from '@testing-library/react-hooks'
import useDebouncedUndo from './useDebouncedUndo'
test('should use debounced undo', () => {
const { result } = renderHook(() => useDebouncedUndo())
const [ content, setter, undoRest ] = result.current
expect(content).toBe('')
expect(typeof setter).toBe('function')
expect(typeof undoRest.undo).toBe('function')
expect(typeof undoRest.redo).toBe('function')
expect(undoRest.canUndo).toBe(false)
expect(undoRest.canRedo).toBe(false)
})
test('should update content immediately', () => {
const { result } = renderHook(() => useDebouncedUndo())
const [ content, setter ] = result.current
expect(content).toBe('')
act(() => setter('test'))
const [ newContent ] = result.current
expect(newContent).toBe('test')
})
test('should debounce undo history update', async () => {
const { result, waitForNextUpdate } = renderHook(() => useDebouncedUndo())
const [ , setter ] = result.current
act(() => setter('test'))
const [ , , undoRest ] = result.current
expect(undoRest.canUndo).toBe(false)
await act(async () => await waitForNextUpdate())
const [ , , newUndoRest ] = result.current
expect(newUndoRest.canUndo).toBe(true)
})
As we can see, we can use async/await in combination with the waitForNextUpdate function to easily handle testing asynchronous operations in our Hooks.
To run the tests, simply execute the following command:
> npm test
As we can see from the following screenshot, all our tests are passing successfully:
The test suite actually watches for changes in our files and automatically reruns tests. We can use various commands to manually trigger test reruns and we can press Q to quit the test runner.
The example code can be found in the Chapter10/chapter10_4 folder.
Just run npm install to install all dependencies and npm start to start the application, and then visit http://localhost:3000 in your browser (if it does not open automatically).
The official React library provides certain built-in Hooks, which can be used to create custom Hooks. We have already learned about the three basic Hooks that React provides:
Additionally, React provides more advanced Hooks, which can be very useful in certain use cases:
The useState Hook returns a value that will persist across re-renders, and a function to update it. A value for the initialState can be passed to it as an argument:
const [ state, setState ] = useState(initialState)
Calling setState updates the value and re-renders the component with the updated value. If the value did not change, React will not re-render the component.
A function can also be passed to the setState function, with the first argument being the current value. For example, consider the following code:
setState(val => val + 1)
Furthermore, a function can be passed to the first argument of the Hook if the initial state is the result of a complex computation. In that case, the function will only be called once during the initialization of the Hook:
const [ state, setState ] = useState(() => {
return computeInitialState()
})
The State Hook is the most basic and ubiquitous Hook provided by React.
The useEffect Hook accepts a function that contains code with side effects, such as timers and subscriptions. The function passed to the Hook will run after the render is done and the component is on the screen:
useEffect(() => {
// do something
})
A cleanup function can be returned from the Hook, which will be called when the component unmounts and is used to, for example, clean up timers or subscriptions:
useEffect(() => {
const interval = setInterval(() => {}, 100)
return () => {
clearInterval(interval)
}
})
The cleanup function will also be called before the effect is triggered again, when dependencies of the effect update.
To avoid triggering the effect on every re-render, we can specify an array of values as the second argument to the Hook. Only when any of these values change, the effect will get triggered again:
useEffect(() => {
// do something when state changes
}, [state])
This array passed as the second argument is called the dependency array of the effect. If you want the effect to only trigger during mounting, and the cleanup function during unmounting, we can pass an empty array as the second argument.
The useContext Hook accepts a context object and returns the current value for the context. When the context provider updates its value, the Hook will trigger a re-render with the latest value:
const value = useContext(NameOfTheContext)
It is important to note that the context object itself needs to be passed to the Hook, not the consumer or provider.
The useReducer Hook is an advanced version of the useState Hook. It accepts a reducer as the first argument, which is a function with two arguments: state and action. The reducer function then returns the updated state computed from the current state and the action. If a reducer returns the same value as the previous state, React will not re-render components or trigger effects:
const [ state, dispatch ] = useReducer(reducer, initialState, initFn)
We should use the useReducer Hook instead of the useState Hook when dealing with complex state changes. Furthermore, it is easier to deal with global state because we can simply pass down the dispatch function instead of multiple setter functions.
We can specify the initial state by setting the initialState value or specifying an initFn function as the third argument. Specifying such a function makes sense when computing the initial state takes a long time or when we want to reuse the function to reset state through an action.
The useMemo Hook takes a result of a function and memoizes it. This means that it will not be recomputed every time. This Hook can be used for performance optimizations:
const memoizedVal = useMemo(
() => computeVal(a, b, c),
[a, b, c]
)
In the previous example, computeVal is a performance-heavy function that computes a result from a, b, and c.
The array passed as the second argument specifies the dependencies of the function. If any of these values change, the function will be recomputed; otherwise, the stored result will be used. If no array is provided, a new value will be computed on every render. If an empty array is passed, the value will only be computed once.
The useMemo Hook is used for performance optimizations in React components.
The useCallback Hook works similarly to the useMemo Hook. However, it returns a memoized callback function instead of a value:
const memoizedCallback = useCallback(
() => doSomething(a, b, c),
[a, b, c]
)
The previous code is similar to the following useMemo Hook:
const memoizedCallback = useMemo(
() => () => doSomething(a, b, c),
[a, b, c]
)
The function returned will only be redefined if one of the dependency values passed in the array of the second argument changes.
The useRef Hook returns a ref object that can be assigned to a component or element via the ref prop. Refs can be used to deal with references to elements and components in React:
const refContainer = useRef(initialValue)
After assigning the ref to an element or component, the ref can be accessed via refContainer.current. If InitialValue is set, refContainer.current will be set to this value before assignment.
The following example defines an input field that will automatically be focused when rendered:
function AutoFocusField () {
const inputRef = useRef(null)
useEffect(() => inputRef.current.focus(), [])
return <input ref={inputRef} type="text" />
}
It is important to note that mutating the current value of a ref does not cause a re-render. If this is needed, we should use a ref callback using useCallback as follows:
function WidthMeasure () {
const [ width, setWidth ] = useState(0)
const measureRef = useCallback(node => {
if (node !== null) {
setWidth(node.getBoundingClientRect().width)
}
}, [])
return <div ref={measureRef}>I am {Math.round(width)}px wide</div>
}
Refs can be used to access the DOM, but also to keep mutable values around, such as storing references to intervals:
function Timer () {
const intervalRef = useRef(null)
useEffect(() => {
intervalRef.current = setInterval(doSomething, 100)
return () => clearInterval(intervalRef.current)
})
// ...
}
Using refs like in the previous example makes them similar to instance variables in classes, such as this.intervalRef.
The useImperativeHandle Hook can be used to customize instance values that are exposed to other components when pointing a ref to it. Doing this should be avoided as much as possible, however, as it tightly couples components together, which harms reusability.
The useImperativeHandle Hook has the following signature:
useImperativeHandle(ref, createHandle, [dependencies])
We can use this Hook to, for example, expose a focus function that other components can trigger via a ref to the component. This Hook should be used in combination with forwardRef as follows:
function FocusableInput (props, ref) {
const inputRef = useRef()
useImperativeHandle(ref, () => ({
focus: () => inputRef.current.focus()
}))
return <input {...props} ref={inputRef} />
}
FocusableInput = forwardRef(FocusableInput)
Then, we can access the focus function as follows:
function AutoFocus () {
const inputRef = useRef()
useEffect(() => inputRef.current.focus(), [])
return <FocusableInput ref={inputRef} />
}
As we can see, using refs means that we can directly access elements and components.
The useLayoutEffect Hook is identical to the useEffect Hook, but it fires synchronously after all DOM mutations are completed and before the component is rendered in the browser. It can be used to read information from the DOM and adjust the appearance of components before rendering. Updates inside this Hook will be processed synchronously before the browser renders the component.
Do not use this Hook unless it is really needed, which is only in certain edge cases. useLayoutEffect will block visual updates in the browser, and thus, is slower than useEffect.
The rule here is to use useEffect first. If your mutation changes the appearance of the DOM node, which can cause it to flicker, you should use useLayoutEffect instead.
The useDebugValue Hook is useful for developing custom Hooks that are part of shared libraries. It can be used to show certain values for debugging in React DevTools.
For example, in our useDebouncedUndo custom Hook, we could do the following:
export default function useDebouncedUndo (timeout = 200) {
const [ content, setInput ] = useState('')
const [ undoContent, { set: setContent, ...undoRest } ] = useUndo('')
useDebugValue('init')
const [ setDebounce, cancelDebounce ] = useDebouncedCallback(
(value) => {
setContent(value)
useDebugValue('added to history')
},
timeout
)
useEffect(() => {
cancelDebounce()
setInput(undoContent.present)
useDebugValue(`waiting ${timeout}ms`)
}, [cancelDebounce, undoContent])
function setter (value) {
setInput(value)
setDebounce(value)
}
return [ content, setter, undoRest ]
}
Adding these useDebugValue Hooks will show the following in the React DevTools:
In this chapter, we first learned how to extract custom Hooks from existing code in our blog app. We extracted various Context Hooks into custom Hooks, then created API Hooks and a more advanced Hook for debounced undo functionality. Next, we learned about interactions between Hooks and how we can use values from other Hooks in custom Hooks. We then created local Hooks for our blog app. Then, we learned about testing various Hooks with Jest and the React Hooks Testing Library. Finally, we learned about all the Hooks provided by the React Hooks API, at the time of writing.
Knowing when and how to extract custom Hooks is a very important skill in React development. In a larger project, we are probably going to define many custom Hooks, specifically tailored to our project's needs. Custom Hooks can also make it easier to maintain our application, as we only need to adjust functionality in one place. Testing custom Hooks is very important, because if we refactor our custom Hooks later on, we want to make sure that they still work properly. Now that we know the full React Hooks API, we can make use of all the Hooks that React provides to create our own custom Hooks.
In the next chapter, we are going to learn how to migrate from React class components to a Hook-based system. We will first create a small project using class components and then we will replace them with function components using Hooks, taking a closer look at the differences between the two solutions.
To recap what we have learned in this chapter, try answering the following questions:
If you are interested in more information about the concepts we learned in this chapter, take a look at the following reading material:
In the final part of the book, we will learn how to use existing state management solutions in combination with Hooks. Additionally, we will demonstrate how to migrate React class components, as well as existing Redux and MobX applications to Hooks.
In this section, we will cover the following chapters:
In the previous chapter we learned how to build our own Hooks by extracting custom Hooks from existing code. Then, we used our own Hooks in the blog app and learned about local Hooks and the interactions between Hooks. Finally, we learned how to write tests for Hooks using the React Hooks Testing Library, and implemented tests for our custom Hooks.
In this chapter, we are going to start by implementing a ToDo app using React class components. In the next step, we are going to learn how to migrate an existing React class component application to Hooks. Seeing the differences between function components using Hooks and class components in practice will deepen our understanding about the trade-offs of using either solution. Furthermore, by the end of this chapter we will be able to migrate existing React applications to Hooks.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter11.
Check out the following video to see the code in action:
Now, let's get started with the chapter.
Before we start migrating from class components to Hooks, we are going to create a small ToDo list app using React class components. In the next section, we are going to turn these class components into function components using Hooks. Finally, we are going to compare the two solutions.
As we did before with the blog app, we are going to start by thinking about the basic structure of our app. For this app, we are going to need the following features:
It is always a good idea to start with a mock-up. So, let's begin:
As we can see, we are going to need the following components:
The TodoList component makes use of a TodoItem component, which is used to show an item, with a checkbox to complete and a button to remove it. The TodoFilter component internally uses a TodoFilterItem component to show the various filters.
We are going to use create-react-app in order to create a new project. Let's initialize the project now:
> npx create-react-app chapter11_1
margin: 20px;
Now, our project has been initialized, and we can start defining the app structure.
We already know what the basic structure of our app is going to be like from the mock-up, so let's start by defining the App component:
import React from 'react'
import Header from './Header'
import AddTodo from './AddTodo'
import TodoList from './TodoList'
import TodoFilter from './TodoFilter'
export default class App extends React.Component {
render () {
return (
<div style={{ width: 400 }}>
<Header />
<AddTodo />
<hr />
<TodoList />
<hr />
<TodoFilter />
</div>
)
}
}
The App component defines the basic structure of our app. It will consist of a header, a way to add new todo items, a list of todo items, and a filter.
Now, we are going to define the components as static components. Later in this chapter, we are going to implement dynamic functionality to them. For now, we are going to implement the following static components:
Let's get started implementing the components now.
We are going to start with the Header component, as it is the most simple out of all the components:
import React from 'react'
export default class Header extends React.Component {
render () {
return <h1>ToDo</h1>
}
}
Now, the Header component for our app is defined.
Next, we are going to define the AddTodo component, which renders an input field and a button.
Let's implement the AddTodo component now:
import React from 'react'
export default class AddTodo extends React.Component {
render () {
return (
<form>
<input type="text" placeholder="enter new task..." style={{ width: 350, height: 15 }} />
<input type="submit" style={{ float: 'right', marginTop: 2 }} value="add" />
</form>
)
}
}
As we can see, the AddTodo component consists of an input field and a button.
Now, we define the TodoList component, which is going to make use of the TodoItem component. For now, we are going to statically define two todo items in this component.
Let's start defining the TodoList component:
import React from 'react'
import TodoItem from './TodoItem'
export default class TodoList extends React.Component {
render () {
const items = [
{ id: 1, title: 'Write React Hooks book', completed: true },
{ id: 2, title: 'Promote book', completed: false }
]
return items.map(item =>
<TodoItem {...item} key={item.id} />
)
}
}
As we can see, the TodoList component renders a list of TodoItem components.
After defining the TodoList component, we are now going to define the TodoItem component, in order to render single items.
Let's start defining the TodoItem component:
import React from 'react'
export default class TodoItem extends React.Component {
render () {
const { title, completed } = this.props
return (
<div style={{ width: 400, height: 25 }}>
<input type="checkbox" checked={completed} />
{title}
<button style={{ float: 'right' }}>x</button>
</div>
)
}
}
The TodoItem component consists of a checkbox, a title, and a button to delete the item.
Finally, we are going to define the TodoFilter component. In the same file, we are going to define another component for the TodoFilterItem.
Let's start defining the TodoFilterItem and TodoFilter components:
class TodoFilterItem extends React.Component {
render () {
const { name } = this.props
const style = {
color: 'blue',
cursor: 'pointer'
}
return <span style={style}>{name}</span>
}
}
export default class TodoFilter extends React.Component {
render () {
return (
<div>
<TodoFilterItem name="all" />{' / '}
<TodoFilterItem name="active" />{' / '}
<TodoFilterItem name="completed" />
</div>
)
}
}
Now, we have a component that lists the three different filter possibilities: all, active, and completed.
Now that we have defined all of the static components, our app should look just like the mock-up. The next step is to implement dynamic code using React state, life cycle, and handler methods.
In this section, we are going to do the following:
Let's get started.
First of all, we are going to define an API that will fetch todo items. In our case, we are simply going to return an array of todo items, after a short delay.
Let's start implementing the mock API:
export const generateID = () => {
const S4 = () =>(((1+Math.random())*0x10000)|0).toString(16).substring(1)
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4())
}
export const fetchAPITodos = () =>
new Promise((resolve) =>
setTimeout(() => resolve([
{ id: generateID(), title: 'Write React Hooks book', completed: true },
{ id: generateID(), title: 'Promote book', completed: false }
]), 100)
)
Now, we have a function that simulates fetching todo items from an API, by returning an array after a delay of 100 ms.
Next, we are going to define a context that will keep our current list of todo items. We are going to call this context StateContext.
Let's start implementing the StateContext now:
import React from 'react'
const StateContext = React.createContext([])
export default StateContext
Now, we have a context where we can store our array of todo items.
We are now going to make the App component dynamic by adding functionality to fetch, add, toggle, filter, and remove todo items. Furthermore, we are going to define a StateContext provider.
Let's start making the App component dynamic:
import StateContext from './StateContext'
import { fetchAPITodos, generateID } from './api'
export default class App extends React.Component {
constructor (props) {
super(props)
this.state = { todos: [], filteredTodos: [], filter: 'all' }
}
componentDidMount () {
this.fetchTodos()
}
fetchTodos () {
fetchAPITodos().then((todos) => {
this.setState({ todos })
this.filterTodos()
})
}
addTodo (title) {
const { todos } = this.state
const newTodo = { id: generateID(), title, completed: false }
this.setState({ todos: [ newTodo, ...todos ] })
this.filterTodos()
}
toggleTodo (id) {
const { todos } = this.state
const newTodos = todos.map(t => {
if (t.id === id) {
return { ...t, completed: !t.completed }
}
return t
}, [])
this.setState({ todos: newTodos })
this.filterTodos()
}
removeTodo (id) {
const { todos } = this.state
const newTodos = todos.filter(t => {
if (t.id === id) {
return false
}
return true
})
this.setState({ todos: newTodos })
this.filterTodos()
}
applyFilter (todos, filter) {
switch (filter) {
case 'active':
return todos.filter(t => t.completed === false)
case 'completed':
return todos.filter(t => t.completed === true)
default:
case 'all':
return todos
}
}
filterTodos (filterArg) {
this.setState(({ todos, filter }) => ({
filter: filterArg || filter,
filteredTodos: this.applyFilter(todos, filterArg || filter)
}))
}
render () {
const { filter, filteredTodos } = this.state
return (
<StateContext.Provider value={filteredTodos}>
<div style={{ width: 400 }}>
<Header />
<AddTodo addTodo={this.addTodo} />
<hr />
<TodoList toggleTodo={this.toggleTodo} removeTodo={this.removeTodo} />
<hr />
<TodoFilter filter={filter} filterTodos={this.filterTodos} />
</div>
</StateContext.Provider>
)
}
constructor () {
super(props)
this.state = { todos: [], filteredTodos: [], filter:
'all' }
this.fetchTodos = this.fetchTodos.bind(this)
this.addTodo = this.addTodo.bind(this)
this.toggleTodo = this.toggleTodo.bind(this)
this.removeTodo = this.removeTodo.bind(this)
this.filterTodos = this.filterTodos.bind(this)
}
Now, our App component can dynamically fetch, add, toggle, remove, and filter todo items. As we can see, when we use class components, we need to re-bind the this context of the handler functions to the class.
After making our App component dynamic, it is time to make all of our other components dynamic as well. We are going to start from the top, with the AddTodo component.
Let's make the AddTodo component dynamic now:
export default class AddTodo extends React.Component {
constructor (props) {
super(props)
this.state = {
input: ''
}
}
handleInput (e) {
this.setState({ input: e.target.value })
}
handleAdd () {
const { input } = this.state
const { addTodo } = this.props
if (input) {
addTodo(input)
this.setState({ input: '' })
}
}
render () {
const { input } = this.state
return (
<form onSubmit={e => { e.preventDefault(); this.handleAdd() }}>
<input
type="text"
placeholder="enter new task..."
style={{ width: 350, height: 15 }}
value={input}
onChange={this.handleInput}
/>
<input
type="submit"
style={{ float: 'right', marginTop: 2 }}
disabled={!input}
value="add"
/>
</form>
)
}
constructor () {
super(props)
this.state = {
input: ''
}
this.handleInput = this.handleInput.bind(this)
this.handleAdd = this.handleAdd.bind(this)
}
Now, our AddTodo component will show a disabled button as long as no text is entered. When activated, clicking the button will trigger the handleAdd function that has been passed down from the App component.
The next component in our ToDo app is the TodoList component. Here, we just need to get the todo items from the StateContext.
Let's make the TodoList component dynamic now:
import StateContext from './StateContext'
export default class TodoList extends React.Component {
static contextType = StateContext
render () {
const items = this.context
return items.map(item =>
<TodoItem {...item} {...this.props} key={item.id} />
)
}
Now, our TodoList component gets the items from the StateContext instead of statically defining them.
Now that we have passed on the removeTodo and toggleTodo methods as props to the TodoItem component, we can implement these features there.
Let's make the TodoItem component dynamic now:
handleToggle () {
const { toggleTodo, id } = this.props
toggleTodo(id)
}
handleRemove () {
const { removeTodo, id } = this.props
removeTodo(id)
}
render () {
const { title, completed } = this.props
return (
<div style={{ width: 400, height: 25 }}>
<input type="checkbox" checked={completed} onChange={this.handleToggle} />
{title}
<button style={{ float: 'right' }} onClick={this.handleRemove}>x</button>
</div>
)
}
export default class TodoItem extends React.Component {
constructor (props) {
super(props)
this.handleToggle = this.handleToggle.bind(this)
this.handleRemove = this.handleRemove.bind(this)
}
Now, the TodoItem component triggers the toggle and remove handler functions.
Lastly, we are going to use the filterTodos method to dynamically filter our todo item list.
Let's start making the TodoFilter component dynamic:
export default class TodoFilter extends React.Component {
render () {
return (
<div>
<TodoFilterItem {...this.props} name="all" />{' / '}
<TodoFilterItem {...this.props} name="active" />{' / '}
<TodoFilterItem {...this.props} name="completed" />
</div>
)
}
}
handleFilter () {
const { name, filterTodos } = this.props
filterTodos(name)
}
render () {
const { name, filter = 'all' } = this.props
const style = {
color: 'blue',
cursor: 'pointer',
fontWeight: (filter === name) ? 'bold' : 'normal'
}
return <span style={style} onClick={this.handleFilter}>{name}</span>
}
class TodoFilterItem extends React.Component {
constructor (props) {
super(props)
this.handleFilter = this.handleFilter.bind(this)
}
Now, our TodoFilter component triggers the handleFilter method in order to change the filter. Our whole app is dynamic now, and we can use all of its functionalities.
The example code can be found in the Chapter11/chapter11_1 folder.
Just run npm install in order to install all dependencies, and npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
After setting up our example project with React class components, we are now going to migrate this project to React Hooks. We are going to show how to migrate side effects, such as fetching todos when the component mounts, as well as state management, which we used for the inputs.
In this section, we are going to migrate the following components:
One of the simplest components to migrate is the TodoItem component. It does not use any state or side effects so we can simply convert it to a function component.
Let's start migrating the TodoItem component:
export default function TodoItem ({ title, completed, id, toggleTodo, removeTodo }) {
function handleToggle () {
toggleTodo(id)
}
function handleRemove () {
removeTodo(id)
}
return (
<div style={{ width: 400, height: 25 }}>
<input type="checkbox" checked={completed} onChange={handleToggle} />
{title}
<button style={{ float: 'right' }} onClick={handleRemove}>x</button>
</div>
)
}
As we can see, function components do not require us to re-bind this, or to define constructors at all. Furthermore, we do not need to destructure from this.props multiple times. We can simply define all props in the header of our function.
Next, we are going to migrate the TodoList component, which wraps the TodoItem component. Here, we use a context, which means that we can now use a Context Hook.
Let's migrate the TodoList component now:
import React, { useContext } from 'react'
export default function TodoList (props) {
const items = useContext(StateContext)
return items.map(item =>
<TodoItem {...item} {...props} key={item.id} />
)
}
As we can see, using contexts with Hooks is much more straightforward. We can simply call a function, and use the return value. No magical assignment of this.context or wrapper hell when using multiple contexts!
Furthermore, we can see that we can gradually migrate components to React Hooks, and our app will still work. There is no need to migrate all components to Hooks at once. React class components can work well together with function React components that use Hooks. The only limitation is that we cannot use Hooks in class components. Therefore, we need to migrate a whole component at a time.
Next up is the TodoFilter component, which is not going to use any Hooks. However, we are going to replace the TodoFilterItem and TodoFilter components with two function components: one for the TodoFilterItem, and one for the TodoFilter component.
First of all, we are going to migrate the TodoFilterItem component. Let's start migrating the component now:
function TodoFilterItem ({ name, filterTodos, filter = 'all' }) {
function handleFilter () {
filterTodos(name)
}
const style = {
color: 'blue',
cursor: 'pointer',
fontWeight: (filter === name) ? 'bold' : 'normal'
}
return <span style={style} onClick={handleFilter}>{name}</span>
}
As we can see, a function component requires much less boilerplate code than the corresponding class component.
Now that we have migrated the TodoFilterItem component, we can migrate the TodoFilter component. Let's migrate it now:
export default function TodoFilter (props) {
return (
<div>
<TodoFilterItem {...props} name="all" />{' / '}
<TodoFilterItem {...props} name="active" />{' / '}
<TodoFilterItem {...props} name="completed" />
</div>
)
}
Now, our TodoFilter component has been successfully migrated.
Next, we are going to migrate the AddTodo component. Here, we are going to use a State Hook to handle the input field state.
Let's migrate the AddTodo component now:
import React, { useState } from 'react'
export default function AddTodo ({ addTodo }) {
const [ input, setInput ] = useState('')
function handleInput (e) {
setInput(e.target.value)
}
function handleAdd () {
if (input) {
addTodo(input)
setInput('')
}
}
return (
<form onSubmit={e => { e.preventDefault(); handleAdd() }}>
<input
type="text"
placeholder="enter new task..."
style={{ width: 350, height: 15 }}
value={input}
onChange={handleInput}
/>
<input
type="submit"
style={{ float: 'right', marginTop: 2 }}
disabled={!input}
value="add"
/>
</form>
)
}
As we can see, using the State Hook makes state management much simpler. We can define a separate value and setter function for each state value, instead of having to deal with a state object. Furthermore, we do not need to destructure from this.state all the time. As a result, our code is much more clean and concise.
Lastly, all that is left to do is migrating the App component. Then, our whole ToDo app will have been migrated to React Hooks. Here, we are going to use a Reducer Hook to manage the state, an Effect Hook to fetch todos when the component mounts, and a Memo Hook to store the filtered todos list.
In this section, we are going to do the following:
Our app is going to accept five actions:
After defining the actions, we can move on to defining the reducers.
We are now going to define the reducers for our state. We are going to need one app reducer and two sub-reducers: one for the todos and one for the filter.
The filtered todos list is going to be computed on the fly by the App component. We can later use a Memo Hook to cache the result and avoid unnecessary re-computation of the filtered todos list.
We are going to start by defining the reducer for the filter value. Let's define the filter reducer now:
import { generateID } from './api'
function filterReducer (state, action) {
if (action.type === 'FILTER_TODOS') {
return action.filter
} else {
return state
}
}
Now, the filterReducer function is defined, and we can handle the FILTER_TODOS action properly.
Next, we are going to define a function for the todo items. Here, we are going to handle the FETCH_TODOS, ADD_TODO, TOGGLE_TODO and REMOVE_TODO actions.
Let's define the todosReducer function now:
function todosReducer (state, action) {
switch (action.type) {
case 'FETCH_TODOS':
return action.todos
case 'ADD_TODO':
const newTodo = {
id: generateID(),
title: action.title,
completed: false
}
return [ newTodo, ...state ]
case 'TOGGLE_TODO':
return state.map(t => {
if (t.id === action.id) {
return { ...t, completed: !t.completed }
}
return t
}, [])
case 'REMOVE_TODO':
return state.filter(t => {
if (t.id === action.id) {
return false
}
return true
})
default:
return state
}
}
Now, the todos reducer is defined, and we can handle the FETCH_TODOS, ADD_TODO, TOGGLE_TODO and REMOVE_TODO actions.
Finally, we need to combine our other reducers into a single reducer for our app state. Let's define the appReducer function now:
export default function appReducer (state, action) {
return {
todos: todosReducer(state.todos, action),
filter: filterReducer(state.filter, action)
}
}
Now, our reducers are grouped together. So, we only have one state object and one dispatch function.
Now that we have defined our reducers, we can start migrating the App component. Let's migrate it now:
import React, { useReducer, useEffect, useMemo } from 'react'
import appReducer from './reducers'
export default function App () {
const [ state, dispatch ] = useReducer(appReducer, { todos: [], filter: 'all' })
useEffect(() => {
fetchAPITodos().then((todos) =>
dispatch({ type: 'FETCH_TODOS', todos })
)
}, [])
const filteredTodos = useMemo(() => {
const { filter, todos } = state
switch (filter) {
case 'active':
return todos.filter(t => t.completed === false)
case 'completed':
return todos.filter(t => t.completed === true)
default:
case 'all':
return todos
}
}, [ state ])
function addTodo (title) {
dispatch({ type: 'ADD_TODO', title })
}
function toggleTodo (id) {
dispatch({ type: 'TOGGLE_TODO', id })
}
function removeTodo (id) {
dispatch({ type: 'REMOVE_TODO', id })
}
function filterTodos (filter) {
dispatch({ type: 'FILTER_TODOS', filter })
}
return (
<StateContext.Provider value={filteredTodos}>
<div style={{ width: 400 }}>
<Header />
<AddTodo addTodo={addTodo} />
<hr />
<TodoList toggleTodo={toggleTodo} removeTodo={removeTodo} />
<hr />
<TodoFilter filter={state.filter} filterTodos={filterTodos} />
</div>
</StateContext.Provider>
)
}
As we can see, using a reducer to handle complex state changes makes our code much more concise and easier to maintain. Our app is now fully migrated to Hooks!
The example code can be found in the Chapter11/chapter11_2 folder.
Just run npm install in order to install all dependencies and run npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
Now that we have finished our migration from class components to Hooks, let's revise and sum up what we have learned.
Counting the lines of code, we can see that with 392 total lines of JavaScript code, function components with Hooks are more concise than class components, which required 430 total lines of JavaScript code. Additionally, the function components with Hooks are easier to understand and test since they simply use JavaScript functions instead of complex React constructs. Furthermore, we were able to refactor all of the state-changing logic into a separate reducers.js file, thus decoupling it from the App component and making it easier to refactor and test. This reduced the file size of App.js from 109 lines to 64 lines, with an additional 50 lines in the reducers.js file.
We can see the reduced lines of code in the following table:
|
Comparison: lines of JavaScript code |
|
|
Class components |
Function components with Hooks |
| 36 ./TodoFilter.js 15 ./TodoList.js 59 ./AddTodo.js 12 ./index.js 7 ./Header.js 5 ./StateContext.js 9 ./App.test.js 135 ./serviceWorker.js 12 ./api.js 109 ./App.js 31 ./TodoItem.js |
25 ./TodoFilter.js 12 ./TodoList.js 42 ./AddTodo.js 12 ./index.js 7 ./Header.js 50 ./reducers.js 5 ./StateContext.js 9 ./App.test.js 135 ./serviceWorker.js 12 ./api.js 64 ./App.js 19 ./TodoItem.js |
| 430 total | 392 total |
With function components and Hooks, the following points do not need to be taken into consideration:
Furthermore, function components have the following advantages:
However, class components can be fine in the following situations:
In the end, it is a matter of preference, but Hooks do have many advantages over classes! If you are starting a new project, definitely go for Hooks. If you are working on an existing project, consider whether it might make sense to refactor certain components to Hook-based components in order to make them simpler. However, you should not immediately port all your projects to Hooks, as refactoring can always introduce new bugs. The best way to adopt Hooks is to slowly but surely replace old class components with Hook-based function components when appropriate. For example, if you are already refactoring a component, you can refactor it to use Hooks!
In this chapter, we first built a ToDo app using React class components. We started by designing the app structure, then implemented static components, and finally, we made them dynamic. In the next section, we learned how to migrate an existing project using class components, to function components using Hooks. Finally, we learned about the trade-offs of class components, when class components or Hooks should be used, and how one should go about migrating an existing project to Hooks.
We have now seen in practice how React class components differ to function components with Hooks. Hooks make our code much more concise and easier to read and maintain. We have also learned that we should gradually migrate our components from class components to function components with Hooks—there is no need to immediately migrate the whole application.
In the next chapter, we are going to learn about handling state with Redux, the trade-offs of using Redux versus just function components with Hooks, how to use Redux with Hooks, and how to migrate an existing Redux application to a Hook-based setup.
In order to recap what we have learned in this chapter, try to answer the following questions:
If you are interested in more information about the concepts that we have learned in this chapter, take a look at the following reading material:
In the previous chapter we learned about React class components, and how to migrate from an existing class component-based project to a Hook-based one. Then, we learned about the trade-offs between the two solutions, and we discussed when and how existing projects should be migrated.
In this chapter, we are going to turn the ToDo application that we created in the previous chapter into a Redux application. First, we are going to learn what Redux is, including the three principles of Redux. We are also going to learn when it makes sense to use Redux in an app, and that it is not appropriate for every app. Furthermore, we are going to learn how to handle state with Redux. Afterward, we are going to learn how to use Redux with Hooks, and how to migrate an existing Redux application to Hooks. Finally, we are going to learn the trade-offs of Redux, in order to be able to decide which solution would be best for a certain use case. By the end of this chapter, you will fully understand how to write Redux applications using Hooks.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter12.
Check out the following video to see the code in action:
Now, let's get started with the chapter.
As we have previously learned, there are two kinds of state in an application:
Previously in this book, we handled local state by using a State Hook, and more complex state (often global state) using a Reducer Hook.
Redux is a solution that can be used to handle all kinds of state in React applications. It provides a single state tree object, which contains all application state. This is similar to what we did with the Reducer Hook in our blog application. Traditionally, Redux was also often used to store local state, which makes the state tree very complex.
Redux essentially consists of five elements:
In the Redux life cycle, the Store contains state, which defines the UI. The UI is connected to the Redux store, via Connectors. User interactions with the UI then trigger Actions, which are sent to the Reducer. The Reducer then updates the state in the Store.
We can see a visualization of the Redux life cycle in the following diagram:
As you can see, we have already learned about three of these components: the store (state tree), actions, and reducers. Redux is like a more advanced version of the Reducer Hook. The difference is that with Redux, we always dispatch state to a single reducer, therefore changing a single state. There should not be more than one instance of Redux. Through this restriction, we can be sure that our whole application state is contained in a single object, which allows us to reconstruct the whole application state, just from the Redux store.
As a result of having a single store containing all state, we can easily debug faulty states by saving the Redux store in a crash report, or we can automatically replay certain actions during debugging so that we do not need to manually enter text and click on buttons, over and over again. Additionally, Redux offers middleware that simplifies how we deal with asynchronous requests, such as fetching data from a server. Now that we understand what Redux is, in the next section, we will learn the three fundamental principles of Redux.
The Redux API is very small, and actually only consists of a handful of functions. What makes Redux so powerful is a certain set of rules that are applied to your code when using the library. These rules allow for the writing of scalable applications that are easy to extend, test, and debug.
Redux is based on three fundamental principles:
This Redux principle states that data should always have a single source of truth. This means that global data comes from a single Redux store, and local data comes from, for example, a certain State Hook. Each kind of data only has a single source. As a result, applications become easier to debug, and are less prone to errors.
With Redux, it is not possible to modify the application state directly. It is only possible to change the state by dispatching actions. This principle makes state changes predictable: if no action happened, the application state will not change. Furthermore, actions are processed one at a time, so we do not have to deal with race conditions. Finally, actions are plain JavaScript objects, which makes them easy to serialize, log, store, or replay. As a result, debugging and testing a Redux application becomes very easy to do.
Pure functions are functions that, given the same input, will always return the same output. Reducer functions in Redux are pure, so, given the same state and action, they will always return the same new state.
For example, the following reducer is an impure function, because calling the function multiple times with the same input results in a different output:
let i = 0
function counterReducer (state, action) {
if (action.type === 'INCREMENT') {
i++
}
return i
}
console.log(counterReducer(0, { type: 'INCREMENT' })) // prints 1
console.log(counterReducer(0, { type: 'INCREMENT' })) // prints 2
To turn this reducer into a pure function, we have to make sure it does not depend on an outside state, and only uses its arguments for the computation:
function counterReducer (state, action) {
if (action.type === 'INCREMENT') {
return state + 1
}
return state
}
console.log(counterReducer(0, { type: 'INCREMENT' })) // prints 1
console.log(counterReducer(0, { type: 'INCREMENT' })) // prints 1
Using pure functions for reducers makes them predictable, and easy to test and debug. With Redux, we need to be careful to always return a new state, and not modify the existing one. So, for example, we cannot use Array.push() on an array state, as it would modify the existing array; we have to use Array.concat() in order to create a new array. The same goes for objects, where we have to use rest/spread syntax to create new objects, instead of modifying existing ones. For example, { ...state, completed: true }.
Now that we have learned about the three fundamental principles of Redux, we can move on to using Redux in practice, by implementing state handling with Redux in our ToDo application.
State management with Redux is actually really similar to using a Reducer Hook. We first define the state object, then actions, and finally, our reducers. An additional pattern in Redux is to create functions that return action objects, so-called action creators. Furthermore, we need to wrap our whole app with a Provider component, and connect components to the Redux store in order to be able to use Redux state and action creators.
First of all, we have to install Redux, React Redux, and Redux Thunk. Let us look at what each one does individually:
Using Redux in combination with React offloads global state management to Redux, while React deals with rendering the application and local state:
To install Redux and React Redux, we are going to use npm. Execute the following command:
> npm install --save redux react-redux redux-thunk
Now that all of the required libraries are installed, we can start setting up our Redux store.
The first step in developing a Redux application is defining the state, then the actions that are going to change the state, and finally, the reducer functions, which carry out the state modification. In our ToDo application, we have already defined the state, the actions, and the reducers, in order to use the Reducer Hook. Here, we simply recap what we defined in the previous chapter.
The full state object of our ToDo app consists of two keys: an array of todo items, and a string, which specifies the currently selected filter value. The initial state looks as follows:
{
"todos": [
{ "id": 1, "title": "Write React Hooks book", "completed": true },
{ "id": 2, "title": "Promote book", "completed": false }
],
"filter": "all"
}
As we can see, in Redux, the state object contains all of the state that is important to our app. In this case, the application state consists of an array of todos and a filter.
Our app accepts the following five actions:
We defined three reducers—one for each part of our state—and an app reducer to combine the other two reducers. The filter reducer waits for a FILTER_TODOS action, and then sets the new filter accordingly. The todos reducer listens to the other todo-related actions, and adjusts the todos array by adding, removing, or modifying elements. The app reducer then combines both reducers, and passes actions down to them. After defining all the elements that are needed to create a Redux application, we can now set up the Redux store.
In order to keep things simple initially, and to show how Redux works, we are not going to use connectors for now. We are simply going to replace the state object, and the dispatch function that was previously provided by a Reducer Hook, with Redux.
Let's set up the Redux store now:
import React, { useState, useEffect, useMemo } from 'react'
import { createStore } from 'redux'
const initialState = { todos: [], filter: 'all' }
const store = createStore(appReducer, initialState)
const { dispatch } = store
const [ state, dispatch ] = useReducer(appReducer, { todos: [], filter: 'all' })
It is replaced with a simple State Hook, which is going to store our Redux state:
const [ state, setState ] = useState(initialState)
useEffect(() => {
const unsubscribe = store.subscribe(() => setState(store.getState()))
return unsubscribe
}, [])
As we can see, the app still runs in exactly the same way as before. Redux works very similarly to the Reducer Hook, but with more functionality. However, there are slight differences in how actions and reducers should be defined, which we are going to learn about in the following sections.
The example code can be found in the Chapter12/chapter12_1 folder.
Just run npm install in order to install all dependencies and npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
The first step when creating a full Redux application is to define so-called action types. They will be used to create actions in action creators and to handle actions in reducers. The idea here is to avoid making typos when defining, or comparing, the type property of actions.
Let's define the action types now:
export const FETCH_TODOS = 'FETCH_TODOS'
export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const REMOVE_TODO = 'REMOVE_TODO'
export const FILTER_TODOS = 'FILTER_TODOS'
Now that we have defined our action types, we can start using them in action creators and reducers.
After defining the action types, we need to define the actions themselves. In doing so, we are going to define the functions that will return the action objects. These functions are called action creators, of which there are two types:
We are going to start by defining synchronous action creators, then we are going to learn how to define asynchronous action creators.
We have already defined the action creator functions earlier, in src/App.js. We can now copy them from our App component, making sure that we adjust the type property in order to use the action type constants, instead of a static string.
Let's define the synchronous action creators now:
import {
ADD_TODO, TOGGLE_TODO, REMOVE_TODO, FILTER_TODOS
} from './actionTypes'
export function addTodo (title) {
return { type: ADD_TODO, title }
}
export function toggleTodo (id) {
return { type: TOGGLE_TODO, id }
}
export function removeTodo (id) {
return { type: REMOVE_TODO, id }
}
export function filterTodos (filter) {
return { type: FILTER_TODOS, filter }
}
As we can see, synchronous action creators simply create and return action objects.
The next step is defining an asynchronous action creator for the fetchTodos action. Here, we are going to use the async/await construct.
We are now going to use an async function to define the fetchTodos action creator:
import {
FETCH_TODOS, ADD_TODO, TOGGLE_TODO, REMOVE_TODO, FILTER_TODOS
} from './actionTypes'
import { fetchAPITodos } from './api'
export function fetchTodos () {
return async (dispatch) => {
const todos = await fetchAPITodos()
dispatch({ type: FETCH_TODOS, todos })
}
}
As we can see, asynchronous action creators return a function that will dispatch actions at a later time.
In order for us to be able to use asynchronous action creator functions in Redux, we are going to need to load the redux-thunk middleware. This middleware checks if an action creator returned a function, rather than a plain object, and if that is the case, it executes that function, while passing the dispatch function to it as an argument.
Let's adjust the store to allow for asynchronous action creators now:
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import appReducer from './reducers'
const store = createStore(appReducer, applyMiddleware(thunk))
export default store
Using the redux-thunk middleware, we can now dispatch functions that will later dispatch actions, which means that our asynchronous action creator is going to work fine now.
As previously mentioned, Redux reducers differ from Reducer Hooks in that they have certain conventions:
We are now going to adjust our existing reducers so that they follow these conventions. The second convention is already implemented, because we defined a single app reducer earlier, in order to avoid having multiple dispatch functions.
So, we are going to focus on the first convention—to set the initial state by defining a default value in the function arguments, as follows:
import { combineReducers } from 'redux'
function filter (state = 'all', action) {
function todos (state = [], action) {
const appReducer = combineReducers({ todos, filter })
export default appReducer
As we can see, Redux reducers are very similar to Reducer Hooks. Redux even provides a function that allows us to combine multiple reducer functions into a single app reducer!
Now, it is time to introduce connectors and container components. In Redux we can use the connect higher-order component to connect existing components to Redux, through injecting state and action creators as props into them.
Redux defines two different kinds of components:
Container components use a connector to connect Redux to a presentational component. This connector accepts two functions:
We are now going to define container components for our existing presentational components:
We are now going to start connecting our components to the Redux store. The presentational components can stay the same as before. We only create new components—container components—that wrap the presentational components, and pass certain props to them.
Let's connect the AddTodo component now:
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { addTodo } from '../actions'
import AddTodo from '../components/AddTodo'
function mapStateToProps (state) {
return {}
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({ addTodo }, dispatch)
}
This code is essentially the same as manually wrapping the action creators, as follows:
function mapDispatchToProps (dispatch) {
return {
addTodo: (...args) => dispatch(addTodo(...args))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AddTodo)
Now, our AddTodo component is successfully connected to the Redux store.
Next, we are going to connect the TodoItem component, so that we can use it in the TodoList component in the next step.
Let's connect the TodoItem component now:
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { toggleTodo, removeTodo } from '../actions'
import TodoItem from '../components/TodoItem'
function mapStateToProps (state) {
return {}
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({ toggleTodo, removeTodo }, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoItem)
Now, our TodoItem component is successfully connected to the Redux store.
After connecting the TodoItem component, we can now use the ConnectedTodoItem component in the TodoList component.
Let's connect the TodoList component now:
import ConnectedTodoItem from '../containers/ConnectedTodoItem'
return filteredTodos.map(item =>
<ConnectedTodoItem {...item} key={item.id} />
)
import { connect } from 'react-redux'
import TodoList from '../components/TodoList'
function mapStateToProps (state) {
const { filter, todos } = state
return { filter, todos }
}
function mapDispatchToProps (dispatch) {
return {}
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)
Now, our TodoList component is successfully connected to the Redux store.
Now that we have connected the TodoList component, we can move the filter logic from the App component to the TodoList component, as follows:
import React, { useMemo } from 'react'
const filteredTodos = useMemo(() => {
const { filter, todos } = state
switch (filter) {
case 'active':
return todos.filter(t => t.completed === false)
case 'completed':
return todos.filter(t => t.completed === true)
default:
case 'all':
return todos
}
}, [ state ])
const filteredTodos = useMemo(() => {
switch (filter) {
case 'active':
return todos.filter(t => t.completed === false)
case 'completed':
return todos.filter(t => t.completed === true)
default:
case 'all':
return todos
}
}, [ filter, todos ])
Now, our filtering logic is in the TodoList component, instead of the App component. Let's move on to connecting the rest of our components.
Next up is the TodoFilter component. Here, we are going to use both mapStateToProps and mapDispatchToProps.
Let's connect the TodoFilter component now:
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { filterTodos } from '../actions'
import TodoFilter from '../components/TodoFilter'
function mapStateToProps (state) {
const { filter } = state
return { filter }
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({ filterTodos }, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoFilter)
Now, our TodoFilter component is successfully connected to the Redux store.
The only component that still needs to be connected now, is the App component. Here, we are going to inject the fetchTodos action creator, and update the component so that it uses the connected versions of all the other components.
Let's connect the App component now:
import ConnectedAddTodo from '../containers/ConnectedAddTodo'
import ConnectedTodoList from '../containers/ConnectedTodoList'
import ConnectedTodoFilter from '../containers/ConnectedTodoFilter'
return (
<div style={{ width: 400 }}>
<Header />
<ConnectedAddTodo />
<hr />
<ConnectedTodoList />
<hr />
<ConnectedTodoFilter />
</div>
)
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchTodos } from '../actions'
import App from '../components/App'
function mapStateToProps (state) {
return {}
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({ fetchTodos }, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
Now, our App component is successfully connected to the Redux store.
Finally, we have to set up a Provider component, which is going to provide a context for the Redux store, which will be used by the connectors.
Let's set up the Provider component now:
import { Provider } from 'react-redux'
import ConnectedApp from './containers/ConnectedApp'
import store from './configureStore'
ReactDOM.render(
<Provider store={store}>
<ConnectedApp />
</Provider>,
document.getElementById('root')
)
Now, our application will work in the same way as before, but everything is connected to the Redux store! As we can see, Redux requires a bit more boilerplate code than simply using React, but it comes with a lot of advantages:
However, there are also disadvantages, which are as follows:
The first point is an advantage and disadvantage at the same time; action types and action creators do require more boilerplate code, but they also make it easier to update action-related code at a later stage. The second point, and the boilerplate code that is required for the connected components, can be solved by using Hooks to connect our components to Redux. We are going to use Hooks with Redux in the next section of this chapter.
The example code can be found in the Chapter12/chapter12_2 folder.
Just run npm install in order to install all dependencies and npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
After turning our todo application into a Redux-based application, we are now using higher-order components, instead of Hooks, in order to get access to the Redux state and action creators. This is the traditional way to develop a Redux application. However, in the latest versions of Redux, it is possible to use Hooks instead of higher-order components! We are now going to replace the existing connectors with Hooks.
The latest version of React Redux offers various Hooks as an alternative to the connect() higher-order component. With these Hooks, you can subscribe to the Redux store, and dispatch actions without having to wrap your components.
The useDispatch Hook returns a reference to the dispatch function that is provided by the Redux store. It can be used to dispatch actions that are returned from action creators. Its API looks as follows:
const dispatch = useDispatch()
We are now going to use the Dispatch Hook to replace the existing container components with Hooks.
After learning how to use the Dispatch Hook, let's move on to migrating our existing components so that they use the Dispatch Hook.
Now that we have learned about the Dispatch Hook, let's see it in action by implementing it in our AddTodo component.
Let's migrate the AddTodo component to Hooks now:
import { useDispatch } from 'react-redux'
import { addTodo } from '../actions'
export default function AddTodo () {
const dispatch = useDispatch()
function handleAdd () {
if (input) {
dispatch(addTodo(input))
setInput('')
}
}
import AddTodo from './AddTodo'
return (
<div style={{ width: 400 }}>
<Header />
<AddTodo />
As you can see, our app still works in the same way as before, but we are now using Hooks in order to connect the component to Redux!
Next, we are going to update our App component so that it directly dispatches the fetchTodos action. Let's migrate the App component to Hooks now:
import { useDispatch } from 'react-redux'
import { fetchTodos } from '../actions'
export default function App () {
const dispatch = useDispatch()
useEffect(() => {
dispatch(fetchTodos())
}, [ dispatch ])
import App from './components/App'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
As we can see, using Hooks is much simpler and more concise than defining a separate container component.
Now, we are going to upgrade the TodoItem component to use Hooks. Let's migrate it now:
import { useDispatch } from 'react-redux'
import { toggleTodo, removeTodo } from '../actions'
export default function TodoItem ({ title, completed, id }) {
const dispatch = useDispatch()
function handleToggle () {
dispatch(toggleTodo(id))
}
function handleRemove () {
dispatch(removeTodo(id))
}
import TodoItem from './TodoItem'
return filteredTodos.map(item =>
<TodoItem {...item} key={item.id} />
)
Now the TodoItem component uses Hooks instead of a container component. Next, we are going to learn about the Selector Hook.
Another very important Hook that is provided by Redux is the Selector Hook. It allows us to get data from the Redux store state, by defining a selector function. The API for this Hook is as follows:
const result = useSelector(selectorFn, equalityFn)
selectorFn is a function that works similarly to the mapStateToProps function. It will get the full state object as its only argument. The selector function gets executed whenever the component renders, and whenever an action is dispatched (and the state is different than the previous state).
It is important to note that returning an object with multiple parts of the state from one Selector Hook will force a re-render every time an action is dispatched. If multiple values from the store need to be requested, we can do the following:
We are now going to implement the Selector Hook in our ToDo application, specifically in the TodoList and TodoFilter components.
First, we are going to implement a Selector Hook to get all todos for the TodoList component, as follows:
import { useSelector } from 'react-redux'
export default function TodoList () {
const filter = useSelector(state => state.filter)
const todos = useSelector(state => state.todos)
import TodoList from './TodoList'
return (
<div style={{ width: 400 }}>
<Header />
<AddTodo />
<hr />
<TodoList />
The rest of the component can stay the same, because the values where we store the parts of the state have the same names as before.
Finally, we are going to implement both the Selector and Dispatch Hooks in the TodoFilter component, because we need to highlight the current filter (state from the Selector Hook) and dispatch an action to change the filter (the Dispatch Hook).
Let's implement Hooks for the TodoFilter component now:
import { useSelector, useDispatch } from 'react-redux'
import { filterTodos } from '../actions'
export default function TodoFilter () {
const dispatch = useDispatch()
const filter = useSelector(state => state.filter)
function handleFilter () {
dispatch(filterTodos(name))
}
import TodoFilter from './TodoFilter'
return (
<div style={{ width: 400 }}>
<Header />
<AddTodo />
<hr />
<TodoList />
<hr />
<TodoFilter />
</div>
)
Now, our Redux application makes full use of Hooks instead of container components!
The example code can be found in the Chapter12/chapter12_3 folder.
Just run npm install in order to install all dependencies and npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
When defining selectors as we have done until now, a new instance of the selector is created every time the component is rendered. This is fine, if the selector function does not do any complex operations and does not maintain internal state. Otherwise, we need to use reusable selectors, which we are going to learn about now.
In order to create reusable selectors, we can use the createSelector function from the reselect library. First, we have to install the library via npm. Execute the following command:
> npm install --save reselect
Now, the reselect library has been installed, and we can use it to create reusable selectors.
If we want to memoize selectors, and the selector only depends on the state (not props), we can declare the selector outside of the component, as follows:
import { createSelector } from 'reselect'
const todosSelector = state => state.todos
const filterSelector = state => state.filter
const selectFilteredTodos = createSelector(
todosSelector,
filterSelector,
(todos, filter) => {
switch (filter) {
case 'active':
return todos.filter(t => t.completed === false)
case 'completed':
return todos.filter(t => t.completed === true)
default:
case 'all':
return todos
}
}
)
export default function TodoList () {
const filteredTodos = useSelector(selectFilteredTodos)
Now that we have defined a reusable selector for the filtered todos, the result of filtering the todos will be memoized, and will not be re-computed if the state did not change.
The example code can be found in the Chapter12/chapter12_4 folder.
Just run npm install in order to install all dependencies and npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
React Redux also provides a useStore Hook, which returns a reference to the Redux store itself. This is the same store object that was passed to the Provider component. Its API looks like this:
const store = useStore()
It is best practice to avoid using the Store Hook directly. It usually makes more sense to use Dispatch or Selector Hooks instead. However, there are special use cases, such as replacing reducers, where using this Hook may be required.
In this section, we have learned how to replace connectors with Hooks in existing Redux applications. Now, we are going to learn a strategy that will allow us to effectively migrate existing Redux applications to Hooks.
In some Redux applications, local state was also stored in the Redux state tree. In others, React class component state was used to store local state. In either case, the way to migrate an existing Redux application is as follows:
We have already learned how to migrate React class components in the previous chapter. In the previous section, we learned how to migrate from Redux connectors to using Selector and Dispatch Hooks. We are now going to show an example of migrating Redux local state to a Hook-based approach.
Let us assume that our existing todo application stores the input field state in Redux, as follows:
{
"todos": [],
"filter": "all",
"newTodo": ""
}
Right now, whenever text is entered, we need to dispatch an action, compute the new state by calling all reducers, and then update the Redux store state. As you can imagine, this can get quite performance heavy if we have many input fields. Instead of storing the newTodo field in Redux, we should use a State Hook to store this local state, as it is only used internally by one component. We have already done this correctly during the implementation of the AddTodo component in our example app.
Now that we have learned how to migrate existing Redux applications to Hooks, we can move on to discussing the trade-offs of Redux.
To wrap up, let us summarize the pros and cons of using Redux in a web application. First, let us start with the positives:
Redux is a perfect fit for larger projects that deal with complex state changes, and state that is used across many components.
However, there are also downsides to using Redux:
As a result, Redux should not be used for simple projects. In these cases, a Reducer Hook might be enough. With a Reducer Hook, there is no need for wrapper components in order to connect our app to the state store. Furthermore, if we use multiple Reducer Hooks, it is slightly more performant to send actions to a specific reducer, instead of a global app reducer. However, the downside lies in having to deal with multiple dispatch functions, and keeping the various states synchronized. We also cannot use middleware, including support for asynchronous actions, with a Reducer Hook. If state changes are complex but only local to a certain component, it might make sense to use a Reducer Hook, but if the state is used throughout multiple components, or it is relevant for the whole app, we should definitely store it in Redux.
You might not need Redux if your component does not do the following:
In that case, it makes sense to use a State or Reducer Hook, instead of Redux.
In this chapter we first learned what Redux is, as well as when and why it should be used. Then, we learned about the three principles of Redux. Next, we used Redux in practice to handle state in our ToDo application. We also learned about synchronous and asynchronous action creators. Then, we learned how to use Redux with Hooks, and how to migrate an existing Redux application to a Hook-based solution. Finally, we learned about the trade-offs of using Redux and Reducer Hooks.
In the next and final chapter, we are going to learn about handling state with MobX. We are going to learn what MobX is and how to use it the traditional way with React. Then, we are going to learn how to use MobX with Hooks, and we will also understand how to migrate an existing MobX application to a Hook-based solution.
In order to recap what we have learned in this chapter, try to answer the following questions:
If you are interested in more information about the concepts that we have learned in this chapter, take a look at the following reading material:
In the previous chapter, we learned about Redux and how to use Redux in combination with Hooks. We also learned how to migrate existing Redux applications to a Hook-based solution. Furthermore, we learned about the trade-offs of using Reducer Hooks versus Redux, and when to use either one of them.
In this chapter, we are going to learn how to use MobX in combination with Hooks. We are going to start by learning how to handle state with MobX, then move on to using MobX with Hooks. Furthermore, we will learn how to migrate an existing MobX application to Hooks. Finally, we are going to discuss the pros and cons of using MobX. By the end of this chapter, you will fully understand how to write MobX applications using Hooks.
The following topics will be covered in this chapter:
A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.
The code for this chapter can be found in the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter13.
Check out the following video to see the code in action:
Now, let's get started with the chapter.
MobX takes a different approach than Redux. Rather than applying restrictions to make state changes predictable, it aims to automatically update anything that is derived from the application state. Rather than dispatching actions, in MobX we can directly modify the state object and MobX will take care of updating anything that uses the state.
The MobX life cycle works as follows:
@action onClick = () => {
this.props.todo.completed = true
}
@observable todos = [
{ title: 'Learn MobX', completed: false }
]
@computed get activeTodos () {
return this.todos.filter(todo => !todo.completed)
}
const TodoList = observer(({ todos }) => (
<div>
{todos.map(todo => <TodoItem {...todo} />)}
</div>
)
We can see a visualization of the MobX life cycle in the following diagram:
MobX and React work very well together. Whenever MobX detects that state has changed, it will cause a re-render of the appropriate components.
Unlike Redux, there are not many restrictions to learn about in order to use MobX. We only need to learn about a handful of core concepts, such as observables, computed values, and reactions.
Now that we know about the MobX life cycle, let's move on to handling state with MobX in practice.
The best way to learn about MobX is by using it in practice and seeing how it works. So, let's start by porting our ToDo application from Chapter 11, Migrating from React Class Components, to MobX. We start by copying the code example from Chapter11/chapter11_2/.
The first step is to install MobX and MobX React, via npm. Execute the following command:
> npm install --save mobx mobx-react
Now that MobX and MobX React are installed, we can start setting up the store.
After installing MobX, it is time to set up our MobX store. The store will store all state, and the related computed values and actions. It is usually defined with a class.
Let's define the MobX store now:
import { observable, action, computed, decorate } from 'mobx'
import { fetchAPITodos, generateID } from './api'
export default class TodoStore {
todos = []
filter = 'all'
get filteredTodos () {
switch (this.filter) {
case 'active':
return this.todos.filter(t => t.completed === false)
case 'completed':
return this.todos.filter(t => t.completed === true)
default:
case 'all':
return this.todos
}
}
fetch () {
fetchAPITodos().then((fetchedTodos) => {
this.todos = fetchedTodos
})
}
addTodo (title) {
this.todos.push({ id: generateID(), title, completed: false })
}
toggleTodo (id) {
for (let todo of this.todos) {
if (todo.id === id) {
todo.completed = !todo.completed
break
}
}
}
removeTodo (id) {
let index = 0
for (let todo of this.todos) {
if (todo.id === id) {
break
} else {
index++
}
}
this.todos.splice(index, 1)
}
filterTodos (filterName) {
this.filter = filterName
}
}
decorate(TodoStore, {
todos: observable,
filter: observable,
filteredTodos: computed,
fetch: action,
addTodo: action,
toggleTodo: action,
removeTodo: action,
filterTodos: action
})
Now, our MobX store is decorated properly and ready to be used!
We could now initialize the store in our App component, and pass it down to all of the other components. However, it is a better idea to use React Context. That way, we can access the store from anywhere in our app. MobX React offers a Provider component, which provides the store in a context.
Let's get started using the Provider component now:
import { Provider } from 'mobx-react'
import TodoStore from './store'
const store = new TodoStore()
ReactDOM.render(
<Provider todoStore={store}>
<App />
</Provider>,
document.getElementById('root')
)
Now, our store is initialized and ready to be used in all other components.
Now that our MobX store is available as a context, we can start connecting our components to it. To do so, MobX React provides the inject higher-order component, which we can use to inject the store into our components.
In this section, we are going to connect the following components to our MobX store:
We are going to start by connecting our App component, where we will use the fetch action to fetch all todos from our API, when the app initializes.
Let's connect the App component now:
import { inject } from 'mobx-react'
export default inject('todoStore')(function App ({ todoStore }) {
useEffect(() => {
todoStore.fetch()
}, [ todoStore ])
return (
<div style={{ width: 400 }}>
<Header />
<AddTodo />
<hr />
<TodoList />
<hr />
<TodoFilter />
</div>
)
})
Now, our App component will fetch todos from the API, and then they will be stored in the TodoStore.
After storing the todos in our store, we can get them from the store, and then we can list all of the todo items in the TodoList component.
Let's connect the TodoList component now:
import { inject, observer } from 'mobx-react'
export default inject('todoStore')(observer(function TodoList ({ todoStore }) {
return todoStore.filteredTodos.map(item =>
<TodoItem key={item.id} item={item} />
)
}))
Now, our app will already list all of the todo items. However, we cannot toggle or remove the todo items yet.
To be able to toggle or remove todo items, we have to connect the TodoItem component. We also define the TodoItem component as an observer, so that MobX knows it will have to re-render the component when the item object changes.
Let's connect the TodoItem component now:
import { inject, observer } from 'mobx-react'
export default inject('todoStore')(observer(function TodoItem ({ item, todoStore }) {
const { title, completed, id } = item
function handleToggle () {
todoStore.toggleTodo(id)
}
function handleRemove () {
todoStore.removeTodo(id)
}
Now, our TodoItem component will call the toggleTodo and removeTodo actions from our todoStore, so we can now toggle and remove the todo items!
To be able to add new todo items, we have to connect the AddTodo component.
Let's connect the AddTodo component now:
import { inject } from 'mobx-react'
export default inject('todoStore')(function AddTodo ({ todoStore }) {
function handleAdd () {
if (input) {
todoStore.addTodo(input)
setInput('')
}
}
Now, our AddTodo component will call the addTodo action from our todoStore, so we can now add new todo items!
Lastly, we have to connect the TodoFilter component in order to be able to select different filters. We also want to show the currently selected filter, so this component needs to be an observer.
Let's connect the TodoFilter component now:
import { inject, observer } from 'mobx-react'
const TodoFilterItem = inject('todoStore')(observer(function TodoFilterItemWrapped ({ name, todoStore }) {
function handleFilter () {
todoStore.filterTodos(name)
}
const style = {
color: 'blue',
cursor: 'pointer',
fontWeight: (todoStore.filter === name) ? 'bold': 'normal'
}
export default function TodoFilter (props) {
return (
<div>
<TodoFilterItem {...props} name="all" />{' / '}
<TodoFilterItem {...props} name="active" />{' / '}
<TodoFilterItem {...props} name="completed" />
</div>
)
}
Now, we can select new filters, which will be marked as selected, in bold. The todo list will also automatically be filtered, because MobX detects a change in the filter value, which causes the filteredTodos computed value to update, and the TodoList observer component to re-render.
The example code can be found in the Chapter13/chapter13_1 folder.
Just run npm install in order to install all dependencies, and npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
In the previous section, we learned how to use MobX with React. As we have seen, to be able to connect our components to the MobX store, we need to wrap them with the inject function, and in some cases, also with the observer function. Instead of using these higher-order components to wrap our components, since the release of v6 of mobx-react, we can also use Hooks to connect our components to the MobX store. We are now going to use MobX with Hooks!
First of all, we have to define a Hook in order to access our own store. As we have learned before, MobX uses React Context to provide, and inject, state into various components. We can get the MobXProviderContext from mobx-react and create our own custom context Hook in order to access all stores. Then, we can create another Hook, to specifically access our TodoStore.
So, let's begin defining a store Hook:
import { useContext } from 'react'
import { MobXProviderContext } from 'mobx-react'
export function useStores () {
return useContext(MobXProviderContext)
}
export function useTodoStore () {
const { todoStore } = useStores()
return todoStore
}
Now, we have a general Hook, to access all stores from MobX, and a specific Hook to access the TodoStore. If we need to, we can also define more Hooks for other stores at a later point.
After creating a Hook to access our store, we can use it instead of wrapping our components with the inject higher-order component function. In the upcoming sections, we will see how we can use Hooks to upgrade our various components.
We are going to start by upgrading our App component. It is possible to gradually refactor components so that they use Hooks instead. We do not need to refactor every component at once.
Let's use Hooks for the App component now:
import { inject } from 'mobx-react'
import { useTodoStore } from './hooks'
export default function App () {
const todoStore = useTodoStore()
As you can see, our app still works in the same way as before! However, we are now using Hooks in the App component, which makes the code much more clean and concise.
Next, we are going to upgrade our TodoList component. Additionally, we are also going to use the useObserver Hook, which replaces the observer higher-order component.
Let's use Hooks for the TodoList component now:
import { inject, observer } from 'mobx-react'
import { useObserver } from 'mobx-react'
import { useTodoStore } from './hooks'
export default function TodoList () {
const todoStore = useTodoStore()
return useObserver(() =>
todoStore.filteredTodos.map(item =>
<TodoItem key={item.id} item={item} />
)
)
}
In our case, MobX will detect that the observer that was defined via the useObserver Hook depends on todoStore.filteredTodos, and filteredTodos depends on the filter and todos values. As a result, the list will be re-rendered whenever either the filter value or the todos array changes.
Next, we are going to upgrade the TodoItem component, which will be a similar process to what we did with the TodoList component.
Let's use Hooks for the TodoItem component now:
import { inject, observer } from 'mobx-react'
import { useObserver } from 'mobx-react'
import { useTodoStore } from './hooks'
export default function TodoItem ({ item }) {
const { title, completed, id } = item
const todoStore = useTodoStore()
function handleToggle () {
todoStore.toggleTodo(item.id)
}
function handleRemove () {
todoStore.removeTodo(item.id)
}
return useObserver(() => {
const { title, completed } = item
return (
<div style={{ width: 400, height: 25 }}>
<input type="checkbox" checked={completed} onChange={handleToggle} />
{title}
<button style={{ float: 'right' }} onClick={handleRemove}>x</button>
</div>
)
})
}
Now, our TodoItem component is properly connected to the MobX store.
If the item.id property changes, we would have to wrap the handler functions, and the return function, within a single useObserver Hook, as follows:
return useObserver(() => {
const { title, completed, id } = item
function handleToggle () {
todoStore.toggleTodo(id)
}
function handleRemove () {
todoStore.removeTodo(id)
}
return (
<div style={{ width: 400, height: 25 }}>
<input type="checkbox" checked={completed} onChange={handleToggle} />
{title}
<button style={{ float: 'right' }} onClick={handleRemove}>x</button>
</div>
)
})
Note that we cannot wrap the handler functions and the return statement in separate Observer Hooks, because then the handler functions would only be defined within the closure of the first Observer Hook. This would mean that we would not be able to access the handler functions from within the second Observer Hook.
Next, we are going to continue to upgrade our components by using Hooks for the AddTodo component.
We repeat the same upgrade process as we did in the App component for the AddTodo component, as follows:
import { inject } from 'mobx-react'
import { useTodoStore } from './hooks'
export default function AddTodo () {
const todoStore = useTodoStore()
Now, our AddTodo component is connected to the MobX store and we can move on to upgrading the TodoFilter component.
For the TodoFilter component, we are going to use a similar process to the one that we used for the TodoList component. We are going to use our useTodoStore Hook and the useObserver Hook.
Let's use Hooks for the TodoFilter component now:
import { inject, observer } from 'mobx-react'
import { useObserver } from 'mobx-react'
import { useTodoStore } from './hooks'
function TodoFilterItem ({ name }) {
const todoStore = useTodoStore()
const style = useObserver(() => ({
color: 'blue',
cursor: 'pointer',
fontWeight: (todoStore.filter === name) ? 'bold' : 'normal'
}))
In this case, the style object will be re-computed whenever the todoStore.filter value changes, which will cause the element to re-render, and change the font weight when a different filter is selected.
The example code can be found in the Chapter13/chapter13_2 folder.
Just run npm install in order to install all dependencies, and npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
In addition to providing global stores to store application-wide state, MobX also provides local stores to store local state. To create a local store, we can use the useLocalStore Hook.
We are now going to implement the Local Store Hook in the AddTodo component:
import { useLocalStore, useObserver } from 'mobx-react'
const [ input, setInput ] = useState('')
Replace it with a Local Store Hook:
const inputStore = useLocalStore(() => ({
In this local store, we can define state values, computed values, and actions. The useLocalStore Hook will automatically decorate values as observable, getter functions (the get prefix) as computed values, and normal functions as actions.
value: '',
get disabled () {
return !this.value
},
updateFromInput (e) {
this.value = e.target.value
},
update (val) {
this.value = val
}
}))
function handleInput (e) {
inputStore.updateFromInput(e)
}
function handleAdd () {
if (inputStore.value) {
todoStore.addTodo(inputStore.value)
inputStore.update('')
}
}
return useObserver(() => (
<form onSubmit={e => { e.preventDefault(); handleAdd() }}>
<input
type="text"
placeholder="enter new task..."
style={{ width: 350, height: 15 }}
value={inputStore.value}
onChange={handleInput}
/>
<input
type="submit"
style={{ float: 'right', marginTop: 2 }}
disabled={inputStore.disabled}
value="add"
/>
</form>
))
}
Now, our AddTodo component uses a local MobX store in order to handle its input value, and to disable/enable the button. As you can see, with MobX, it is possible to use multiple stores, for local as well as global states. The hard part is deciding how to split up and group your stores in a way that makes sense for the given application.
The example code can be found in the Chapter13/chapter13_3 folder.
Just run npm install in order to install all dependencies, and npm start to start the application, then visit http://localhost:3000 in your browser (if it did not open automatically).
In the previous section, we learned how to replace MobX higher-order components, such as inject and observer in existing MobX applications with Hooks. Now, we are going to learn how to migrate local state to Hooks in existing MobX applications.
An existing MobX application can be migrated to a Hook-based solution by following three steps:
We have already learned how to use a State Hook in the early chapters of this book. State Hooks make sense for simple state, such as the current state of a checkbox.
We have already learned how to use the useLocalState Hook in this chapter. We can use the Local State Hook for complex local state, such as complex forms where multiple fields interact with each other. Then, we can replace multiple State and Effect Hooks with a single Local State Hook and computed values and actions.
Lastly, global state should be stored in separate MobX stores, such as the TodoStore, which we defined in this chapter. In MobX, multiple stores can be created and passed down to components using the Provider component. We can then create a separate custom Hook for each of the stores.
To wrap up, let's summarize the pros and cons of using MobX in a web application. First, let's start with the positives:
MobX is perfect for small—and large projects—that deal with complex state changes, and state that is used across many components.
However, there are also downsides to using MobX:
If state changes are simple, and only local state within components is needed, MobX should not be used. In that case, a State or a Reducer Hook might be enough. With Reducer and State Hooks, there is no need for wrapper components in order to connect our app to the store.
Flexibility is a good thing, but it can also cause us to structure a project badly. However, MobX provides a project called mobx-state-tree, which allows us to make our MobX applications more structured and enforce a certain kind of architecture. More information can be found on the project page in the following GitHub repository: https://github.com/mobxjs/mobx-state-tree.
In this chapter, we first learned what MobX is, which elements it consists of, and how they work together. Then, we learned how to use MobX for state management in practice. We also learned how to connect a MobX store to React components, by using the inject and observer higher-order components. Next, we replaced the higher-order components with Hooks, which made our code much more clean and concise. We also learned how to use a Local Store Hook to deal with complex local state in MobX. Finally, we learned how to migrate an existing MobX application to Hooks, and we recapped what the trade-offs of using MobX are.
This chapter marks the end of this book. In this book, we started out with a motivation to use Hooks. We learned that there are common problems in React apps that cannot be easily solved without Hooks. Then, we created our first component using Hooks and compared it to a class-component-based solution. Next, we learned about various Hooks in depth, starting with the State Hook, which is the most ubiquitous of them all. We also learned about solving common problems with Hooks, such as conditional Hooks and Hooks in loops.
After learning about the State Hook in depth, we developed a small blog app using Hooks. We then learned about Reducer Hooks, Effect Hooks, and Context Hooks, in order to be able to implement more features in our app. Next, we learned how to request resources efficiently using Hooks. Furthermore, we learned how to prevent unnecessary re-rendering with React.memo, and how to implement lazy-loading with React Suspense. Then, we implemented routes in our blog app, and we learned how Hooks can make dynamic routing much easier.
We also learned about various Hooks that are provided by the community, which make dealing with input fields, various data structures, responsive design, and undo/redo functionality so much easier. Furthermore, we learned about the rules of Hooks, how to create our own custom Hooks, and how interactions between Hooks work. Toward the end, we learned how to effectively migrate from existing class-component-based apps, to a Hook-based solution. Finally, we learned how to use Hooks with Redux and MobX, and how to migrate existing Redux and MobX applications to Hooks.
Now that we have learned about Hooks in depth, we are ready to use them in our applications! We have also learned how to migrate existing projects to Hooks, so we can start doing that now. I hope you enjoyed learning about React Hooks, and that you are looking forward to implementing Hooks in your applications! I am sure that using Hooks will make coding much more enjoyable for you, just like they did for me.
In order to recap what we have learned in this chapter, try to answer the following questions:
If you are interested in more information about the concepts that we have learned in this chapter, take a look at the following reading material:
Here, we answer all the questions asked at the end of each chapter. You can use these questions to review what you have learned throughout the book.
If you enjoyed this book, you may be interested in these other books by Packt:
React Design Patterns and Best Practices - Second Edition
Carlos Santana Roldán
ISBN: 978-1-78953-017-9
Mastering React Test-Driven Development
Daniel Irvine
ISBN: 978-1-78913-341-7
Please share your thoughts on this book with others by leaving a review on the site that you bought it from. If you purchased the book from Amazon, please leave us an honest review on this book's Amazon page. This is vital so that other potential readers can see and use your unbiased opinion to make purchasing decisions, we can understand what our customers think about our products, and our authors can see your feedback on the title that they have worked with Packt to create. It will only take a few minutes of your time, but is valuable to other potential customers, our authors, and Packt. Thank you!