Translate "useMemo" by yuta-ike ยท Pull Request #643 ยท reactjs/ja.react.dev
Size changes
Details
๐ฆ Next.js Bundle Analysis for react-dev
This analysis was generated by the Next.js Bundle Analysis action. ๐ค
This PR introduced no changes to the JavaScript bundle! ๐
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
้ ใใชใใพใใใใใกใใฎ็ขบ่ชใใ้กใใใพใใใณใผใๅ ใฎใณใกใณใใฏ็ฟป่จณใใชใใใจใซใใฆใใพใใ
ใพใใๅ ใซ่จใฃใฆใใในใใ ใฃใใใใใใชใใฎใงใใใuseCallback ใจใใชใ็ฟป่จณใ่ขซใฃใฆใใใจใใใใใใฎใงใใใใจใใใใ็ฌ็ซใใฆใฌใใฅใผใใพใใใใใใใใฏ็ตฑไธใ่กใในใใ ใจใฏๆใใพใใใใฑใฃใจ่ฆใๆใๆใใจใซใใใฎๆใฏใใฃใกใฎ่จณใฎๆนใ่ช็ถใ ใชใใฟใใใชๆใใงใใใใไฝ่ฃใใใใฐ่ฆๆฏในใฆใใใ ใใฆ็ตฑไธใ่ฉฆใฟใฆใใใ ใใใฐๅนธใใงใ๏ผuseCallback ๅดใฎ็ฟป่จณใซๆใๅ ฅใใฆใๆงใใพใใ๏ผใ
| #### ๅผๆฐ {/*parameters*/} | ||
|
|
||
| * `calculateValue`: The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type. React will call your function during the initial render. On next renders, React will return the same value again if the `dependencies` have not changed since the last render. Otherwise, it will call `calculateValue`, return its result, and store it so it can be reused later. | ||
| * `calculateValue`: ใญใฃใใทใฅใใใๅคใ่จ็ฎใใ้ขๆฐใ็ด้ขๆฐใงใๅผๆฐใๅใใใไปปๆใฎๅใฎๅคใ่ฟใใใจใใงใใพใใReact ใฏๅๅใฌใณใใผไธญใซใใฎ้ขๆฐใๅผใณๅบใใพใใๆฌกๅไปฅ้ใฎใฌใณใใผใงใฏใ็ดๅใฎใฌใณใใผใจ `dependencies` ใๅคๅใใฆใใชใใใฐใๅใๅคใๅๅบฆ่ฟใใพใใ`dependencies` ใๅคๅใใฆใใใฐใ`calculateValue` ใๅผใณๅบใใฆใใฎ็ตๆใ่ฟใใๅๆใซใๅพใใๅๅฉ็จใใใใใซใใฎ็ตๆใไฟๅญใใพใใ |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| * `calculateValue`: ใญใฃใใทใฅใใใๅคใ่จ็ฎใใ้ขๆฐใ็ด้ขๆฐใงใๅผๆฐใๅใใใไปปๆใฎๅใฎๅคใ่ฟใใใจใใงใใพใใReact ใฏๅๅใฌใณใใผไธญใซใใฎ้ขๆฐใๅผใณๅบใใพใใๆฌกๅไปฅ้ใฎใฌใณใใผใงใฏใ็ดๅใฎใฌใณใใผใจ `dependencies` ใๅคๅใใฆใใชใใใฐใๅใๅคใๅๅบฆ่ฟใใพใใ`dependencies` ใๅคๅใใฆใใใฐใ`calculateValue` ใๅผใณๅบใใฆใใฎ็ตๆใ่ฟใใๅๆใซใๅพใใๅๅฉ็จใใใใใซใใฎ็ตๆใไฟๅญใใพใใ | |
| * `calculateValue`: ใญใฃใใทใฅใใใๅคใ่จ็ฎใใ้ขๆฐใ็ด้ขๆฐใงใๅผๆฐใๅใใใไปปๆใฎๅใฎไฝใใใฎๅคใ่ฟใๅฟ ่ฆใใใใพใใReact ใฏๅๅใฌใณใใผไธญใซใใฎ้ขๆฐใๅผใณๅบใใพใใๆฌกๅไปฅ้ใฎใฌใณใใผใงใฏใ็ดๅใฎใฌใณใใผใจ `dependencies` ใๅคๅใใฆใใชใใใฐใๅใๅคใๅๅบฆ่ฟใใพใใ`dependencies` ใๅคๅใใฆใใใฐใ`calculateValue` ใๅผใณๅบใใฆใใฎ็ตๆใ่ฟใใๅๆใซใๅพใใๅๅฉ็จใใใใใซใใฎ็ตๆใไฟๅญใใพใใ |
| ๅๅใฎใฌใณใใผใงใฏใๅผๆฐใชใใง `calculateValue` ใๅผใณๅบใใ็ตๆใใ`useMemo` ใฎ่ฟใๅคใจใชใใพใใ | ||
|
|
||
| During next renders, it will either return an already stored value from the last render (if the dependencies haven't changed), or call `calculateValue` again, and return the result that `calculateValue` has returned. | ||
| ๆฌกๅไปฅ้ใฎใฌใณใใผใงใฏใไพๅญ้ขไฟใๅคๅใใฆใใชใๅ ดๅใฏใไปฅๅใฎใฌใณใใผใงไฟๅญใใใๅคใ่ฟใใพใใๅคๅใใฆใใๅ ดๅใฏใ`calculateValue` ใๅๅบฆๅผใณๅบใใใใฎ็ตๆใใใฎใพใพ่ฟใใพใใ |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| ๆฌกๅไปฅ้ใฎใฌใณใใผใงใฏใไพๅญ้ขไฟใๅคๅใใฆใใชใๅ ดๅใฏใไปฅๅใฎใฌใณใใผใงไฟๅญใใใๅคใ่ฟใใพใใๅคๅใใฆใใๅ ดๅใฏใ`calculateValue` ใๅๅบฆๅผใณๅบใใใใฎ็ตๆใใใฎใพใพ่ฟใใพใใ | |
| ๆฌกๅไปฅ้ใฎใฌใณใใผใงใฏใไพๅญ้ ๅใๅคๅใใฆใใชใๅ ดๅใฏใไปฅๅใฎใฌใณใใผใงไฟๅญใใใๅคใ่ฟใใพใใๅคๅใใฆใใๅ ดๅใฏใ`calculateValue` ใๅๅบฆๅผใณๅบใใใใฎ็ตๆใใใฎใพใพ่ฟใใพใใ |
| * React **will not throw away the cached value unless there is a specific reason to do that.** For example, in development, React throws away the cache when you edit the file of your component. Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache--for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should be fine if you rely on `useMemo` solely as a performance optimization. Otherwise, a [state variable](/reference/react/useState#avoiding-recreating-the-initial-state) or a [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) may be more appropriate. | ||
| * `useMemo` ใฏใใใฏใชใฎใงใใซในใฟใ ใใใฏใ**ใณใณใใผใใณใใฎใใใใฌใใซ**ใงใใๅผใณๅบใใใจใใงใใพใใใใซใผใใๆกไปถๅๅฒใฎไธญใงๅผใณๅบใใใจใฏใงใใพใใใใใใซใผใใๆกไปถๅๅฒใฎไธญใงๅผใณๅบใใใๅ ดๅใฏใๆฐใใใณใณใใผใใณใใซๅใๅบใใฆใใใฎไธญใซ state ใ็งปๅใใใฆใใ ใใใ | ||
| * Strict Mode ใงใฏใ[็ด็ฒใงใชใ้ขๆฐใ่ฆใคใใใใใใใใใซ](#my-initializer-or-updater-function-runs-twice)ใ**่จ็ฎ้ขๆฐ (`calculateValue`) ใ 2 ๅบฆๅผใณๅบใใใพใ**ใใใใฏใ้็บๆใฎใฟใฎๆๅใงใๆฌ็ชใงใฏๅฝฑ้ฟใฏไธใใพใใใใใใ่จ็ฎ้ขๆฐใ็ด็ฒใงใใใฐ๏ผ็ด็ฒใงใใในใใงใ๏ผใ2 ๅๅผใณๅบใใใฆใใณใผใใซๅฝฑ้ฟใฏใใใพใใใ2 ๅใฎๅผใณๅบใใฎใใกใไธๆนใฎๅผใณๅบใ็ตๆใฏ็ก่ฆใใใพใใ | ||
| * ็นๅฅใช็็ฑใใชใ้ใใใญใฃใใทใฅๅคใ็ ดๆฃใใใใใจใฏใใใพใใใ็ ดๆฃใใใใฑใผในใฏใไพใใฐใ้็บๆใซใณใณใใผใใณใใฎใใกใคใซใ็ทจ้ใใใจใใญใฃใใทใฅใ็ ดๆฃใใใพใใใพใใ้็บๆใใใณๆฌ็ชๆใซใๅๅใใฆใณใไธญใซใณใณใใผใใณใใใตในใใณใใใใจใใญใฃใใทใฅใฏ็ ดๆฃใใใพใใๅฐๆฅ็ใซใฏใใญใฃใใทใฅใ็ ดๆฃใใใใใจใๅๆใจใใๆฉ่ฝใ React ใซ่ฟฝๅ ใใใๅฏ่ฝๆงใใใใพใใไพใใฐใๅฐๆฅ็ใซไปฎๆณใชในใใ็ตใฟ่พผใฟใงใตใใผใใใใๅ ดๅใไปฎๆณใใผใใซใฎใใฅใผใใผใใใในใฏใญใผใซใขใฆใใใ้ ็ฎใฏใใญใฃใใทใฅใ็ ดๆฃใใใใใซใชใใใใใใพใใใใใฎใใใชๆๅใฏใใใใฉใผใใณในๆ้ฉๅใฎใฟใ็ฎ็ใจใใฆ `useMemo` ใไฝฟใฃใฆใใๅ ดๅใซใฏๅ้กใใใพใใใใใใใไปใฎ็ฎ็ใงๅฉ็จใใฆใใๅ ดๅใฏใ[state ๅคๆฐ](/reference/react/useState#avoiding-recreating-the-initial-state) ใ [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) ใๅฉ็จใใๆนใ่ฏใใใใใใพใใใ |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| * ็นๅฅใช็็ฑใใชใ้ใใใญใฃใใทใฅๅคใ็ ดๆฃใใใใใจใฏใใใพใใใ็ ดๆฃใใใใฑใผในใฏใไพใใฐใ้็บๆใซใณใณใใผใใณใใฎใใกใคใซใ็ทจ้ใใใจใใญใฃใใทใฅใ็ ดๆฃใใใพใใใพใใ้็บๆใใใณๆฌ็ชๆใซใๅๅใใฆใณใไธญใซใณใณใใผใใณใใใตในใใณใใใใจใใญใฃใใทใฅใฏ็ ดๆฃใใใพใใๅฐๆฅ็ใซใฏใใญใฃใใทใฅใ็ ดๆฃใใใใใจใๅๆใจใใๆฉ่ฝใ React ใซ่ฟฝๅ ใใใๅฏ่ฝๆงใใใใพใใไพใใฐใๅฐๆฅ็ใซไปฎๆณใชในใใ็ตใฟ่พผใฟใงใตใใผใใใใๅ ดๅใไปฎๆณใใผใใซใฎใใฅใผใใผใใใในใฏใญใผใซใขใฆใใใ้ ็ฎใฏใใญใฃใใทใฅใ็ ดๆฃใใใใใซใชใใใใใใพใใใใใฎใใใชๆๅใฏใใใใฉใผใใณในๆ้ฉๅใฎใฟใ็ฎ็ใจใใฆ `useMemo` ใไฝฟใฃใฆใใๅ ดๅใซใฏๅ้กใใใพใใใใใใใไปใฎ็ฎ็ใงๅฉ็จใใฆใใๅ ดๅใฏใ[state ๅคๆฐ](/reference/react/useState#avoiding-recreating-the-initial-state) ใ [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) ใๅฉ็จใใๆนใ่ฏใใใใใใพใใใ | |
| * **็นๅฅใช็็ฑใใชใ้ใใใญใฃใใทใฅใใใๅคใ็ ดๆฃใใใใใจใฏใใใพใใ**ใใญใฃใใทใฅใ็ ดๆฃใใใใฑใผในใฎไพใจใใฆใฏใ้็บๆใซใณใณใใผใใณใใฎใใกใคใซใ็ทจ้ใใๅ ดๅใใใใพใใใพใใ้็บๆใใใณๆฌ็ชๆใซใๅๅใใฆใณใไธญใซใณใณใใผใใณใใใตในใใณใใใใจใใญใฃใใทใฅใฏ็ ดๆฃใใใพใใๅฐๆฅ็ใซใฏใใญใฃใใทใฅใ็ ดๆฃใใใใใจใๅๆใจใใๆฉ่ฝใ React ใซ่ฟฝๅ ใใใๅฏ่ฝๆงใใใใพใใไพใใฐใๅฐๆฅ็ใซไปฎๆณใชในใใ็ตใฟ่พผใฟใงใตใใผใใใใๅ ดๅใไปฎๆณใใผใใซใฎใใฅใผใใผใใใในใฏใญใผใซใขใฆใใใ้ ็ฎใฏใใญใฃใใทใฅใ็ ดๆฃใใใใใซใชใใใใใใพใใใใใฎใใใชๆๅใฏใใใใฉใผใใณในๆ้ฉๅใฎใฟใ็ฎ็ใจใใฆ `useMemo` ใไฝฟใฃใฆใใๅ ดๅใซใฏๅ้กใใใพใใใใใใใไปใฎ็ฎ็ใงๅฉ็จใใฆใใๅ ดๅใฏใ[state ๅคๆฐ](/reference/react/useState#avoiding-recreating-the-initial-state) ใ [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) ใๅฉ็จใใๆนใ่ฏใใใใใใพใใใ |
| <Note> | ||
|
|
||
| Caching return values like this is also known as [*memoization*,](https://en.wikipedia.org/wiki/Memoization) which is why this Hook is called `useMemo`. | ||
| ใใฎใใใซ่ฟใๅคใใญใฃใใทใฅใใใใจใฏใ[*memoization ๏ผใกใขๅ๏ผ*](https://en.wikipedia.org/wiki/Memoization) ใจใใฆ็ฅใใใฆใใพใใใใฎใใใใใฎใใใฏใฏ `useMemo` ใจๅผใฐใใฆใใพใใ |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| ใใฎใใใซ่ฟใๅคใใญใฃใใทใฅใใใใจใฏใ[*memoization ๏ผใกใขๅ๏ผ*](https://en.wikipedia.org/wiki/Memoization) ใจใใฆ็ฅใใใฆใใพใใใใฎใใใใใฎใใใฏใฏ `useMemo` ใจๅผใฐใใฆใใพใใ | |
| ใใฎใใใช่ฟใๅคใฎใญใฃใใทใฅใฏใ[*ใกใขๅ (memoization)*](https://en.wikipedia.org/wiki/Memoization) ใจใใฆ็ฅใใใฆใใใใใใใใฎใใใฏใ `useMemo` ใจใใๅๅใงใใ็็ฑใงใใ |
Comment on lines +82 to +83
| 1. `() =>` ใฎใใใซใๅผๆฐใๅใใใๆฑใใใ่จ็ฎ็ตๆใ่ฟใ<CodeStep step={1}>่จ็ฎ้ขๆฐ</CodeStep> | ||
| 2. ใณใณใใผใใณใๅ ใซใใๅคใฎใใกใ่จ็ฎ้ขๆฐๅ ใงไฝฟ็จใใใฆใใใในใฆใฎๅคใๅซใใ<CodeStep step={2}>ไพๅญ้ ๅ</CodeStep> |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| 1. `() =>` ใฎใใใซใๅผๆฐใๅใใใๆฑใใใ่จ็ฎ็ตๆใ่ฟใ<CodeStep step={1}>่จ็ฎ้ขๆฐ</CodeStep> | |
| 2. ใณใณใใผใใณใๅ ใซใใๅคใฎใใกใ่จ็ฎ้ขๆฐๅ ใงไฝฟ็จใใใฆใใใในใฆใฎๅคใๅซใใ<CodeStep step={2}>ไพๅญ้ ๅ</CodeStep> | |
| 1. `() =>` ใฎใใใซใๅผๆฐใๅใใใๆฑใใใ่จ็ฎ็ตๆใ่ฟใ<CodeStep step={1}>่จ็ฎ้ขๆฐ</CodeStep>ใ | |
| 2. ใณใณใใผใใณใๅ ใซใใๅคใฎใใกใ่จ็ฎ้ขๆฐๅ ใงไฝฟ็จใใใฆใใใในใฆใฎๅคใๅซใใ<CodeStep step={2}>ไพๅญ้ ๅ</CodeStep>ใ |
| ``` | ||
|
|
||
| Read [keeping components pure](/learn/keeping-components-pure) to learn more about purity. | ||
| ็ด็ฒๆงใซใคใใฆ่ฉณใใ็ฅใใซใฏใ[ใณใณใใผใใณใใ็ด็ฒใซไฟใค](/learn/keeping-components-pure)ใๅ็ งใใฆใใ ใใใ |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| ็ด็ฒๆงใซใคใใฆ่ฉณใใ็ฅใใซใฏใ[ใณใณใใผใใณใใ็ด็ฒใซไฟใค](/learn/keeping-components-pure)ใๅ็ งใใฆใใ ใใใ | |
| ็ด้ขๆฐใซใคใใฆ่ฉณใใ็ฅใใซใฏใ[ใณใณใใผใใณใใ็ด็ฒใซไฟใค](/learn/keeping-components-pure)ใๅ็ งใใฆใใ ใใใ |
็ด่จณใงใฏใชใใงใใโฆ
| --- | ||
|
|
||
| ### Every time my component renders, the calculation in `useMemo` re-runs {/*every-time-my-component-renders-the-calculation-in-usememo-re-runs*/} | ||
| ### ใณใณใใผใใณใใใฌใณใใผใใใใใณใซใ`useMemo` ๅ ใฎ้ขๆฐใๅๅฎ่กใใใ {/*every-time-my-component-renders-the-calculation-in-usememo-re-runs*/} |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| ### ใณใณใใผใใณใใใฌใณใใผใใใใใณใซใ`useMemo` ๅ ใฎ้ขๆฐใๅๅฎ่กใใใ {/*every-time-my-component-renders-the-calculation-in-usememo-re-runs*/} | |
| ### ใณใณใใผใใณใใใฌใณใใผใใใใใณใซ `useMemo` ๅ ใฎ้ขๆฐใๅๅฎ่กใใใ {/*every-time-my-component-renders-the-calculation-in-usememo-re-runs*/} |
| ``` | ||
|
|
||
| Alternatively, you could remove `useMemo` and instead wrap `Report` itself in [`memo`.](/reference/react/memo) If the `item` prop does not change, `Report` will skip re-rendering, so `Chart` will skip re-rendering too: | ||
| ใใใใฏใ`useMemo` ใๅ้คใใ`Report` ่ชไฝใ [`memo`](/reference/react/memo) ใงใฉใใใใใใจใงใ่งฃๆฑบใงใใพใใ`item` props ใๅคๅใใชใๅ ดๅใฏใ`Report` ใฎๅใฌใณใใผใฏในใญใใใใใ`Chart` ใฎๅใฌใณใใผใในใญใใใใใพใใ |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| ใใใใฏใ`useMemo` ใๅ้คใใ`Report` ่ชไฝใ [`memo`](/reference/react/memo) ใงใฉใใใใใใจใงใ่งฃๆฑบใงใใพใใ`item` props ใๅคๅใใชใๅ ดๅใฏใ`Report` ใฎๅใฌใณใใผใฏในใญใใใใใ`Chart` ใฎๅใฌใณใใผใในใญใใใใใพใใ | |
| ใใใใฏใ`useMemo` ใๅ้คใใ`Report` ่ชไฝใ [`memo`](/reference/react/memo) ใงใฉใใใใใใจใงใ่งฃๆฑบใงใใพใใ`item` ใๅคๅใใชใๅ ดๅใฏใ`Report` ใฎๅใฌใณใใผใฏในใญใใใใใ`Chart` ใฎๅใฌใณใใผใในใญใใใใใพใใ |
| 1. ใใใณใณใใผใใณใใไปใฎใณใณใใผใใณใใ่ฆ่ฆ็ใซใฉใใใใๅ ดๅใฏใ[JSX ใๅญ่ฆ็ด ใจใใฆๅใๅใใใใซใใฆใใ ใใใ](/learn/passing-props-to-a-component#passing-jsx-as-children)ใใฎใใใซใใใใจใงใใฉใใใผใณใณใใผใใณใใ่ช่บซใฎ state ใๆดๆฐใใใจใใงใใๅญ่ฆ็ด ใๅใฌใณใใผใใๅฟ ่ฆใใชใใจ React ใๅคๆญใงใใพใใ | ||
| 1. ใญใผใซใซใช state ใๅฉ็จใใๅฟ ่ฆไปฅไธใซ [state ใใชใใใขใใใใ](/learn/sharing-state-between-components)ใใจใฏ้ฟใใฆใใ ใใใไพใใฐใใใฉใผใ ใใใใขใคใใ ใใใใผใใใฆใใใใฉใใใใฎใใใชไธๆ็ใช state ใฏใใใชใผใฎใใใใฌใใซใใฐใญใผใใซใช state ใฉใคใใฉใชใซไฟๆใใชใใใใซใใฆใใ ใใใ | ||
| 1. ใฌใณใใผใญใธใใฏใ[็ด็ฒใซไฟใค](/learn/keeping-components-pure)ใใใซใใฆใใ ใใใใณใณใใผใใณใใฎๅใฌใณใใผใซใใฃใฆใไฝใๅ้กใ่ตทใใใใ็ฎใซ่ฆใใใใธใฅใขใซใฎๅ้กใๅผใ่ตทใใใใใใใๅ ดๅใใใใฏใณใณใใผใใณใใฎใใฐใงใ๏ผ ใกใขๅใใใใฎใงใฏใชใใใใฐใไฟฎๆญฃใใฆใใ ใใใ | ||
| 1. [state ใๆดๆฐใใไธ่ฆใชใจใใงใฏใ](/learn/you-might-not-need-an-effect)ใ้ฟใใฆใใ ใใใReact ใขใใชใฎใใใฉใผใใณในๅ้กใฎใปใจใใฉใฏใใจใใงใฏใใใ็บ็ใใๆดๆฐใฎ้ฃ้ใซใใฃใฆๅผใ่ตทใใใใพใใใใฎ้ฃ้ใซใใฃใฆใใณใณใใผใใณใใไฝๅบฆใ็นฐใ่ฟใใฌใณใใผใใใฆใใพใใฎใงใใ |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| 1. [state ใๆดๆฐใใไธ่ฆใชใจใใงใฏใ](/learn/you-might-not-need-an-effect)ใ้ฟใใฆใใ ใใใReact ใขใใชใฎใใใฉใผใใณในๅ้กใฎใปใจใใฉใฏใใจใใงใฏใใใ็บ็ใใๆดๆฐใฎ้ฃ้ใซใใฃใฆๅผใ่ตทใใใใพใใใใฎ้ฃ้ใซใใฃใฆใใณใณใใผใใณใใไฝๅบฆใ็นฐใ่ฟใใฌใณใใผใใใฆใใพใใฎใงใใ | |
| 1. [state ใๆดๆฐใใไธ่ฆใชใจใใงใฏใ](/learn/you-might-not-need-an-effect)ใ้ฟใใฆใใ ใใใReact ใขใใชใฎใใใฉใผใใณในๅ้กใฎใปใจใใฉใฏใใจใใงใฏใๅ ใงใฎ้ฃ้็ใช state ๆดๆฐใซใใฃใฆใณใณใใผใใณใใฎใฌใณใใผใไฝๅบฆใๅผใ่ตทใใใใใใใซ็ใใพใใ |
| #### ๆฏๅใณใณใใผใใณใใๅใฌใณใใผใใ {/*always-re-rendering-a-component*/} | ||
|
|
||
| In this example, the `List` implementation is also **artificially slowed down** so that you can see what happens when some React component you're rendering is genuinely slow. Try switching the tabs and toggling the theme. | ||
| ใใฎไพใงใใ`List` ใฎๅฎ่ฃ ใซใฏ**ใใใฆ้ ๅปถใๅ ฅใฃใฆใใพใ**ใใใฎใใใใฌใณใใผไธญใซๅผใณๅบใใฆใใ React ใณใณใใผใใณใใ่ใใ้ ใๅ ดๅใฎๆๅใ็ขบ่ชใงใใพใใใฟใใๅคๆดใใใใใใผใใๅใๆฟใใใใใฆใฟใฆใใ ใใใ |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| ใใฎไพใงใใ`List` ใฎๅฎ่ฃ ใซใฏ**ใใใฆ้ ๅปถใๅ ฅใฃใฆใใพใ**ใใใฎใใใใฌใณใใผไธญใซๅผใณๅบใใฆใใ React ใณใณใใผใใณใใ่ใใ้ ใๅ ดๅใฎๆๅใ็ขบ่ชใงใใพใใใฟใใๅคๆดใใใใใใผใใๅใๆฟใใใใใฆใฟใฆใใ ใใใ | |
| ใใฎไพใงใใ`List` ใฎๅฎ่ฃ ใซใฏ**ไบบ็บ็ใช้ ๅปถใๅ ฅใฃใฆใใพใ**ใใใฎใใใใฌใณใใผไธญใซๅผใณๅบใใฆใใ React ใณใณใใผใใณใใ่ใใ้ ใๅ ดๅใฎๆๅใ็ขบ่ชใงใใพใใใฟใใๅคๆดใใใใใใผใใๅใๆฟใใใใใฆใฟใฆใใ ใใใ |
@yuta-ike ใใกใๅฏพๅฟ้กใใพใใงใใใใใๆ้ใๅณใใใใใงใใใไปฐใฃใฆใใใ ใใใฐใใใฎใพใพใใกใใงๅผใ็ถใใใจใๅฏ่ฝใงใใ
@yuta-ike ไธป่ฆ่จไบใง็ฟป่จณๆชๅฎไบใใใใฎใฟใจใชใฃใฆใใใใใใๅฎไบใใชใใจใตใคใๅ จไฝใGoogleๆค็ดขใงใฒใฃใใใใชใใจใใๆฎๅฟตใชใใจใซใชใฃใฆใใพใใ
- ใใกใใง้ใใใซใฌใใฅใผใณใกใณใใซๅฏพๅฟใใฆใใใ ใ
- suggestion ใใใกใใง้ฉ็จใใฆใใฎใพใพ้ฒใใ
- ใใฎ PR ใ close ใใฆใใกใใงใใ็ดใ
ใใใใงใๆงใใพใใใฎใงๅคๆญใใ้กใใใพใใ
@smikitky ็ณใ่จณใใใใพใใ๏ผๅฎๅ จใซๅคฑๅฟตใใฆใใใพใใใไปไฟฎๆญฃใซๅใๆใใใพใใใ่ฟทๆใใใใใฆใใฟใพใใ
ใใใใจใใใใใพใใ๏ผ
ๆใใใชใในใ2็ฎๆใใฃใใฎใงใใกใใงไฟฎๆญฃใใใฆใใใ ใใพใใใ
@yuta-ike ใพใ memo ใฎๆนใฎใใญใฅใกใณใใฏ็ๆใใใฆใใพใใใใญใ็งใฎๆนใงๅผใๅใฃใฆ่ฏใใงใใใใใ
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
๐ LGTM!!!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters