Description

I recently upgraded this project to React 18 using functional React components AND hooks.

For state I use the useState hook, for side effects the useEffect Hook, and the useCallback hook to prevent infinite function calls to the function created to fetch the data from the JSONPlaceholder API. A call to this function is passed to the useEffect hook and a reference to it is passed to its array of dependencies.

I use object destructuring assignment for passing down props. I use the react-lazy-load-image-component package to implement lazy loading of my Robohash images fetched from the Robohash API, some of which sometimes did not load immediately and left an image placeholder. Then I would literally have to manually clear the browser cache and reload the page to fetch those straggler images from the API. With the react-lazy-load-image-component package, images are loaded from the top down instead of the other way around, and this resulted in much faster and successful loading of all the images from the API. In addition, I use yarn, create-react-app, try catch for error handling, async/await, scss modules using dart sass, and hosted the project on gh-pages.

Project Includes

apis, api error handling, create-react-app, css grid, css in js, (dart) sass, fetch api, flexbox, javascript object, manipulating the dom, mobile friendly, modern javascript, npx, react 18, react event handlers, react image lazy loading, react virtual dom, useState() method, template string literal interpolation, yarn

• View Monsters Rolodex 2022 (Hooks) on Github GH Pages

• View Monsters Rolodex 2022 (Hooks) Repository on Github