Today we'll optimize the performance of our app and improve the initial loading UX using
We can use
useCallback to only re-render components when our data actually changes. This is something we want to do for most components, especially ones that are used a lot of times.
Try optimizing all of the components on the landing page:
You can generally start by wrapping the component function in
memo(). Then, look at the list of props: are there any object, array, or function props (i.e. non-primitive props)? If so, anywhere the component is used, try to wrap those values in
useMemo (for objects and arrays) or
useCallback (for callback functions).
Tip: you can use the Profiler tab in the React Developer Tools for Chrome to measure how often components re-render.
Fetching data with
So far, we've been fetching data with our
useFetch hook. However, by using
Suspense, we'll be able to define our sequence of loading states more easily.
Today, try using the (provided)
useResource hook to fetch data, instead of
useResourceis generic, you may want to specialize it at the callsite for better type checking, e.g.
Note that you'll need at least one
<Suspense> component higher up in the React component tree than whatever component you call
useResource from. I recommend wrapping each of the "blocks" in our UI, the
Trade components, in a separate wrapper component (e.g.
TradeBlock) that fetches the resource specifically for that component, and assemble these new components in