diff --git a/beta/src/content/apis/react/useCallback.md b/beta/src/content/apis/react/useCallback.md index 864b653b..465cfc3f 100644 --- a/beta/src/content/apis/react/useCallback.md +++ b/beta/src/content/apis/react/useCallback.md @@ -48,9 +48,9 @@ On the following renders, React will compare the dependencies In other words, `useCallback` caches a function between re-renders until its dependencies change. ---- +**Let's walk through an example to see when this is useful.** -**To see how caching a function can help you optimize rendering, let's walk through an example.** Let's say that you're passing a `handleSubmit` function down from the `ProductPage` to the child `ShippingForm` component: +Say you're passing a `handleSubmit` function down from the `ProductPage` to the `ShippingForm` component: ```js {5} function ProductPage({ productId, referrer, theme }) { @@ -64,7 +64,7 @@ function ProductPage({ productId, referrer, theme }) { You've noticed that toggling the `theme` prop freezes the app for a moment, but if you remove `` from your JSX, it feels fast. This tells you that it's worth trying to optimize the `ShippingForm` component. -**By default, when a component re-renders, React re-renders all of its children recursively.** This is why, when `ProductPage` re-renders with a different `theme`, the `ShippingForm` component *also* re-renders. This is fine for components that don't require much calculation to re-render. But if you've verified that a re-render is slow, you can tell `ShippingForm` to *skip re-rendering when its props are the same as on last render* by wrapping it in [`memo`](/apis/react/memo): +**By default, when a component re-renders, React re-renders all of its children recursively.** This is why, when `ProductPage` re-renders with a different `theme`, the `ShippingForm` component *also* re-renders. This is fine for components that don't require much calculation to re-render. But if you've verified that a re-render is slow, you can tell `ShippingForm` to skip re-rendering when its props are the same as on last render by wrapping it in [`memo`](/apis/react/memo): ```js {1,7} import { memo } from 'react';