diff --git a/beta/src/content/apis/react/useCallback.md b/beta/src/content/apis/react/useCallback.md index 6027924e..18b2cb00 100644 --- a/beta/src/content/apis/react/useCallback.md +++ b/beta/src/content/apis/react/useCallback.md @@ -32,6 +32,8 @@ function ShippingForm({ onSubmit }) { export default memo(ShippingForm); ``` +**This is a performance optimization. The `useCallback` and [`useMemo`](/apis/react/useMemo) Hooks are often needed to make it work.** + Let's say the `ProductPage` component passes a `handleSubmit` function to that `ShippingForm` component: ```js {2-7,11} @@ -788,4 +790,4 @@ Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ... ``` -When you find which dependency is breaking memoization, either find a way to remove it, or [memoize it as well.](/api/react/useMemo#memoizing-a-dependency-of-another-hook) +When you find which dependency is breaking memoization, either find a way to remove it, or [memoize it as well.](/apis/react/useMemo#memoizing-a-dependency-of-another-hook) diff --git a/beta/src/content/apis/react/useMemo.md b/beta/src/content/apis/react/useMemo.md index bb9fa57f..3910556b 100644 --- a/beta/src/content/apis/react/useMemo.md +++ b/beta/src/content/apis/react/useMemo.md @@ -486,6 +486,8 @@ function List({ items }) { export default memo(List); ``` +**This is a performance optimization. The `useMemo` and [`useCallback`](/apis/react/useCallback) Hooks are often needed to make it work.** + For this optimization to work, the parent component that renders this `` needs to ensure that, if it doesn't want `List` to re-render, every prop it passes to the `List` must be the same as on the last render. Let's say the parent `TodoList` component looks like this: @@ -1007,13 +1009,13 @@ function Dropdown({ allItems, text }) { ``` **Now your calculation depends on `text` directly (which is a string and can't "accidentally" be new like an object).** - You can use a similar approach to prevent [`useEffect`](/api/react/useEffect) from firing again unnecessarily. Before you try to optimize dependencies with `useMemo`, see if you can make them unnecessary. [Read about removing Effect dependencies.](/learn/removing-effect-dependencies) + You can use a similar approach to prevent [`useEffect`](/apis/react/useEffect) from firing again unnecessarily. Before you try to optimize dependencies with `useMemo`, see if you can make them unnecessary. [Read about removing Effect dependencies.](/learn/removing-effect-dependencies) --- ### Memoizing a function {/*memoizing-a-function*/} -Suppose the `Form` component is wrapped in [`memo`.](/api/react/memo) You want to pass a function to it as a prop: +Suppose the `Form` component is wrapped in [`memo`.](/apis/react/memo) You want to pass a function to it as a prop: ```js {2-7} export default function ProductPage({ product, referrerId }) {