Skip to content

Commit 5e391d6

Browse files
authored
Merge branch 'master' into dl0312
2 parents eabd02b + 077e30c commit 5e391d6

File tree

5 files changed

+90
-92
lines changed

5 files changed

+90
-92
lines changed

content/docs/code-splitting.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ const App = () => (
225225

226226
## Named Exports {#named-exports}
227227

228-
`React.lazy`는 현재 default exports만 지원합니다. named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다.
228+
`React.lazy`는 현재 default exports만 지원합니다. named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성할 수 있습니다. 이렇게 하면 tree shaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다.
229229

230230
```js
231231
// ManyComponents.js

content/docs/hooks-effect.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -473,7 +473,7 @@ In the future, the second argument might get added automatically by a build-time
473473
>
474474
>If you use this optimization, make sure the array includes **all values from the component scope (such as props and state) that change over time and that are used by the effect**. Otherwise, your code will reference stale values from previous renders. Learn more about [how to deal with functions](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) and [what to do when the array changes too often](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often).
475475
>
476-
>If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the inputs array always works.
476+
>If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the dependencies array always works.
477477
>
478478
>If you pass an empty array (`[]`), the props and state inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem.
479479
>

content/docs/hooks-faq.md

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -740,7 +740,7 @@ The [`useMemo`](/docs/hooks-reference.html#usememo) Hook lets you cache calculat
740740
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
741741
```
742742

743-
This code calls `computeExpensiveValue(a, b)`. But if the inputs `[a, b]` haven't changed since the last value, `useMemo` skips calling it a second time and simply reuses the last value it returned.
743+
This code calls `computeExpensiveValue(a, b)`. But if the dependencies `[a, b]` haven't changed since the last value, `useMemo` skips calling it a second time and simply reuses the last value it returned.
744744

745745
Remember that the function passed to `useMemo` runs during rendering. Don't do anything there that you wouldn't normally do while rendering. For example, side effects belong in `useEffect`, not `useMemo`.
746746

@@ -767,7 +767,7 @@ Note that this approach won't work in a loop because Hook calls [can't](/docs/ho
767767

768768
### How to create expensive objects lazily? {#how-to-create-expensive-objects-lazily}
769769

770-
`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the inputs are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes you need to be sure an object is only created once.
770+
`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the dependencies are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes you need to be sure an object is only created once.
771771

772772
**The first common use case is when creating the initial state is expensive:**
773773

@@ -809,13 +809,10 @@ function Image(props) {
809809

810810
// ✅ IntersectionObserver is created lazily once
811811
function getObserver() {
812-
let observer = ref.current;
813-
if (observer !== null) {
814-
return observer;
812+
if (ref.current === null) {
813+
ref.current = new IntersectionObserver(onIntersect);
815814
}
816-
let newObserver = new IntersectionObserver(onIntersect);
817-
ref.current = newObserver;
818-
return newObserver;
815+
return ref.current;
819816
}
820817

821818
// When you need it, call getObserver()

content/docs/reference-react.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ redirect_from:
1919

2020
### 컴포넌트 {#components}
2121

22-
React 컴포넌트를 사용하면 UI를 독립적이고 재사용할 수 있는 부분으로 나누고 각 부분을 분리하여 생각할 수 있습니다. React 컴포넌트는 `React.Component` 또는 `React.PureComponent`로 세부적으로 나누어 정의할 수 있습니다.
22+
React 컴포넌트를 사용하면 UI를 독립적이고 재사용할 수 있는 부분으로 나누고 각 부분을 분리하여 생각할 수 있습니다. React 컴포넌트는 `React.Component` 또는 `React.PureComponent`로 세부적으로 나누어 정의할 수 있습니다.
2323

2424
- [`React.Component`](#reactcomponent)
2525
- [`React.PureComponent`](#reactpurecomponent)

0 commit comments

Comments
 (0)