by Bob MacNeal, 3 Mar 2019
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.
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.
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)
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.
The useRef hook (above) is used to set focus on the text input upon clearing the search term.
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:
- It receives a search term as a prop from its parent component Search;
- It invokes a service layer function called searchHackerNews(searchTerm) to fetch results;
- It displays a CircularProgress loading indicator while the request resolves; and
- 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).
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.
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”.
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.
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.
Jump back to Exploring React Hooks – 1.