Exploring React Hooks – 2

by Bob MacNeal, 3 Mar 2019

React, the JavaScript library for building UI components, now supports Hooks. In the previous post, Exploring React Hooks – 1, I described an exercise to determine how to best use React hooks in the context of building a prototype called simple-hooks.

In this sequel, I demonstrate how I used React hooks in a second prototype with different requirements, namely a search application called simple-hooks-search.

Like simple-hooks, the search application simple-hooks-search uses Material-UI React components and icons for design and functional simplicity.

React hooks were used to back a simple search application UI (below) with the following elements:

  • input for search terms;
  • an X button to clear the search;
  • a button to submit a search; and
  • a search results list.

Screen Shot 2019-03-03 at 2.55.34 PM.png

Code

The main container in the simple-hooks-search prototype is the functional component Search. This container component includes a component for the form called SearchForm and a component for the results called SearchResults.

In Search (below), useState stores the search term. Setting the search term causes a re-render.

The syntax of useState is:
const [propertyName, setPropertyName] = useState(initial state)

Screen Shot 2019-03-03 at 3.21.51 PM.png

Search.js component

SearchForm

The SearchForm component has a handleSearch function to process search term submissions and a handleClearSearchTerm function to clear the form. Note that handleClearSearchTerm also uses a useRef hook.

Screen Shot 2019-03-03 at 3.36.42 PM.png

SearchForm.js component

The useRef hook (above) is used to set focus on the text input upon clearing the search term.

SearchResults

When a search term is submitted from the SearchForm component, results are fetched from the Hacker News search API for display in the SearchResults component. The salient features of the SearchResults component are:

  1. It receives a search term as a prop from its parent component Search;
  2. It invokes a service layer function called searchHackerNews(searchTerm) to fetch results;
  3. It displays a CircularProgress loading indicator while the request resolves; and
  4. Finally, once the server request resolves, it loops through the listItems adorning them with markup for display. Also note that any error would be displayed (e.g., should the API request fail).
Screen Shot 2019-03-03 at 3.48.36 PM.png

SearchResults.js component

The function searchHackerNews uses a custom hook called useAxiosGetItems. The custom hook takes a URL and the name of the results array in the response from the server as parameters.

Screen Shot 2019-03-03 at 3.54.40 PM.png

searchService.js

Custom Hook

The custom hook useAxiosGetItems has been slightly repurposed (from that used in Part 1) to accommodate the fact that the Hacker News search API returns an array called hits within a response object. The hits array contains the search results we want to display.

Line #14 calls below calls setListItems on response.data[itemListName] where itemListName equals “hits”.

Screen Shot 2019-03-03 at 3.59.59 PM.png

useAxiosGetItems.js

The custom hook uses the useEffect and useState hooks. It returns search results in listItems, a loading boolean for a progress indicator, and any errors that occur during the request (line #25 above).

An asynchronous request is made that returns the following entities (at different times):

  • loading – A boolean that is true until the request resolves, then changes to false. This loading variable allows for a progress indicator to be temporarily displayed in the UI while the request in in progress.
  • listItems – When the request for the resource items resolves, an array of the search results is plucked from the hits array and returned with loading toggle to false.
  • error – Should an error occur, an object including an HTTP return code and a descriptive message is sent back for display in the UI.

Conclusion

With the simple-hooks-search prototype, I once again confirmed that React hooks negate the need for life-cycle methods and enable simple state management in functional components. As with the simple-hooks prototype, hooks also reduce some of the boilerplate inherent in stateful class components.

Code for this prototype is available in the simple-hooks-search git repository.

Note that the first prototype I made simple-hooks, forming the basis of Exploring React Hooks – 1, has similarities but subtle differences to the simple-hooks-search prototype.

Jump back to Exploring React Hooks – 1.

One thought on “Exploring React Hooks – 2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s