Browse Source

fix links

main
Dan Abramov 2 years ago
parent
commit
4aafbe17a5
  1. 4
      beta/src/content/apis/react/useCallback.md
  2. 6
      beta/src/content/apis/react/useMemo.md

4
beta/src/content/apis/react/useCallback.md

@ -32,6 +32,8 @@ function ShippingForm({ onSubmit }) {
export default memo(ShippingForm); 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: Let's say the `ProductPage` component passes a `handleSubmit` function to that `ShippingForm` component:
```js {2-7,11} ```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 ... 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)

6
beta/src/content/apis/react/useMemo.md

@ -486,6 +486,8 @@ function List({ items }) {
export default memo(List); 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 `<List />` 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. For this optimization to work, the parent component that renders this `<List />` 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: 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).** **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*/} ### 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} ```js {2-7}
export default function ProductPage({ product, referrerId }) { export default function ProductPage({ product, referrerId }) {

Loading…
Cancel
Save