From 62d1ffef3e0599b2b7d8c90858acd97f2cbc5631 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 15 Sep 2022 20:26:21 +0100 Subject: [PATCH] tweak --- beta/src/content/apis/react/useCallback.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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';