Skip to content

Commit d3e1246

Browse files
committed
render hook
1 parent b96bb2b commit d3e1246

File tree

1 file changed

+17
-15
lines changed

1 file changed

+17
-15
lines changed

website/docs/13.x/docs/api/misc/render-hook.mdx

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# `renderHook` function
22

3+
## `renderHook`
4+
35
```ts
46
function renderHook<Result, Props>(
57
hookFn: (props?: Props) => Result,
@@ -41,15 +43,15 @@ Callback is a function that is called each `render` of the test component. This
4143

4244
The `props` passed into the callback will be the `initialProps` provided in the `options` to `renderHook`, unless new props are provided by a subsequent `rerender` call.
4345

44-
## `options`
46+
### `options`
4547

4648
A `RenderHookOptions<Props>` object to modify the execution of the `callback` function, containing the following properties:
4749

48-
### `initialProps` {#initial-props}
50+
#### `initialProps` {#initial-props}
4951

5052
The initial values to pass as `props` to the `callback` function of `renderHook`. The `Props` type is determined by the type passed to or inferred by the `renderHook` call.
5153

52-
### `wrapper`
54+
#### `wrapper`
5355

5456
A React component to wrap the test component in when rendering. This is usually used to add context providers from `React.createContext` for the hook to access with `useContext`.
5557

@@ -58,7 +60,7 @@ A React component to wrap the test component in when rendering. This is usually
5860
Set to `false` to disable concurrent rendering.
5961
Otherwise, `render` will default to using concurrent rendering used in the React Native New Architecture.
6062

61-
## Result
63+
### Result
6264

6365
```ts
6466
interface RenderHookResult<Result, Props> {
@@ -70,23 +72,23 @@ interface RenderHookResult<Result, Props> {
7072

7173
The `renderHook` function returns an object that has the following properties:
7274

73-
### `result`
75+
#### `result`
7476

7577
The `current` value of the `result` will reflect the latest of whatever is returned from the `callback` passed to `renderHook`. The `Result` type is determined by the type passed to or inferred by the `renderHook` call.
7678

77-
### `rerender`
79+
#### `rerender`
7880

7981
A function to rerender the test component, causing any hooks to be recalculated. If `newProps` are passed, they will replace the `callback` function's `initialProps` for subsequent rerenders. The `Props` type is determined by the type passed to or inferred by the `renderHook` call.
8082

81-
### `unmount`
83+
#### `unmount`
8284

8385
A function to unmount the test component. This is commonly used to trigger cleanup effects for `useEffect` hooks.
8486

85-
## Examples
87+
### Examples
8688

8789
Here we present some extra examples of using `renderHook` API.
8890

89-
### With `initialProps`
91+
#### With `initialProps`
9092

9193
```ts
9294
const useCount = (initialCount: number) => {
@@ -117,7 +119,7 @@ it('should increment count', () => {
117119
});
118120
```
119121

120-
### With `wrapper`
122+
#### With `wrapper`
121123

122124
```tsx
123125
it('should use context value', () => {
@@ -150,18 +152,18 @@ Async versions of `renderHook` designed for working with React 19 and React Susp
150152
```ts
151153
interface RenderHookAsyncResult<Result, Props> {
152154
result: { current: Result };
153-
rerender: (props: Props) => Promise<void>;
154-
unmount: () => Promise<void>;
155+
rerenderAsync: (props: Props) => Promise<void>;
156+
unmountAsync: () => Promise<void>;
155157
}
156158
```
157159

158-
The `RenderHookAsyncResult` differs from `RenderHookResult` in that `rerender` and `unmount` are async functions.
160+
The `RenderHookAsyncResult` differs from `RenderHookResult` in that `rerenderAsync` and `unmountAsync` are async functions.
159161

160162
```ts
161163
import { renderHookAsync, act } from '@testing-library/react-native';
162164

163165
test('should handle async hook behavior', async () => {
164-
const { result, rerender } = await renderHookAsync(useAsyncHook);
166+
const { result, rerenderAsync } = await renderHookAsync(useAsyncHook);
165167

166168
// Test initial state
167169
expect(result.current.loading).toBe(true);
@@ -172,7 +174,7 @@ test('should handle async hook behavior', async () => {
172174
});
173175

174176
// Re-render to get updated state
175-
await rerender();
177+
await rerenderAsync();
176178
expect(result.current.loading).toBe(false);
177179
});
178180
```

0 commit comments

Comments
 (0)