Implementing Requests and React Suspense

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...

Technical requirements

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:

http://bit.ly/2Mm9yoC

Please note that it is highly recommended that you write the code on your own. Do not simply run the code examples that have been provided. It is important that you write the code yourself in order for you to be able to learn and understand properly. However, if you run into any issues, you can always refer to the code example.

Now, let's get started with the chapter.

Requesting resources with Hooks

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.

Setting up a dummy server

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.

...

Preventing unnecessary re-rendering with React.memo

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...

Implementing lazy loading with React Suspense

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.

...

Summary

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.

Questions

In order to recap what we have learned in this chapter, try to answer the following questions:

1. How can we easily create a full REST API from a simple JSON file?
2. What are the advantages of using a proxy to access our backend server during development?
3. Which combinations of Hooks can we use to implement requests?
4. Which libraries can we use to implement requests?
5. How can we deal with loading states using react-request-hook?
6. How can we deal with errors using react-request-hook?
7. How can we prevent the unnecessary re-rendering of components?
8. How can we reduce the bundle size of our app?

Further reading

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:

• Official documentation of json-server: https://github.com/typicode/json-server.
• Official documentation of concurrently: https://github.com/kimmobrunfeldt/concurrently.
• Official documentation of axios: https://github.com/axios/axios.
• Official documentation of react-request-hook: https://github.com/schettino/react-request-hook.
• Create React App documentation on configuring proxies: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually.
• Fetching data with React Hooks: https://www.robinwieruch.de/react-hooks-fetch-data
• When to use useMemo: https://kentcdodds.com/blog/usememo-and-usecallback