Skip to content

Commit f5d79b7

Browse files
committed
docs: notifyOnChangeProps 사용 예시 추가, 설명 보충
1 parent e5e4713 commit f5d79b7

1 file changed

Lines changed: 14 additions & 6 deletions

File tree

README.md

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -662,13 +662,21 @@ const {
662662

663663
### notifyOnChangeProps
664664

665+
```tsx
666+
import { useQuery } from "@tanstack/react-query";
667+
668+
const { data, dataUpdatedAt } = useQuery({
669+
queryKey: ["super-heroes"],
670+
queryFn: getAllSuperHero,
671+
notifyOnChangeProps: ["data"], // data 값 변경시에만 리랜더링이 발생한다
672+
});
673+
```
674+
665675
- notifyOnChangeProps: `string[] | "all" | (() => string[] | "all")`
666-
- 따로 설정하지 않으면, **컴포넌트에서 접근한 값이 변경되었을 때만** 리랜더링이 발생한다. (기본값)
667-
- 특정 프로퍼티가 변경되었을 때만 리랜더링이 발생하도록 설정할 수 있다. 예를 들어 `['data', 'error']`로 설정하면 `data` 또는 `error`가 변경되었을 때 컴포넌트가 리랜더링된다.
668-
- `'all'`로 설정할 경우 쿼리의 어떤 프로퍼티가 변경되든 컴포넌트는 리랜더링된다.
669-
- 참고: 기본 동작은 `Object.defineProperty()`를 활용한다.
670-
- [PR](https://github.com/TanStack/query/pull/1578/files#diff-93f379800fc8abf895eba249b2e2371eda98740aa40fc9f284a8088d190f46c3R506-R514)
671-
- [Object.defineProperty()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)
676+
- 쿼리의 특정 프로퍼티들이 변경되었을 때만 리랜더링이 발생하도록 설정할 수 있다.
677+
- 별도로 설정하지 않으면, **컴포넌트에서 접근한 값이 변경되었을 때** 리랜더링이 발생한다 (기본 동작). 즉 위 예시에서 `notifyOnChangeProps`에 설정값을 주지 않았다면, `data`, `dataUpdatedAt` 중 어느 하나가 변경되면 리랜더링이 발생한다.
678+
- `"all"`로 설정할 경우 쿼리의 어떤 프로퍼티가 변경되든 컴포넌트가 리랜더링된다.
679+
- 참고: 기본 동작은 [Object.defineProperty()](https://github.com/TanStack/query/pull/1578/files#diff-93f379800fc8abf895eba249b2e2371eda98740aa40fc9f284a8088d190f46c3R506-R514)를 활용한다.
672680

673681
<br />
674682

0 commit comments

Comments
 (0)