mirror of
https://github.com/strapi/strapi.git
synced 2025-12-10 22:44:39 +00:00
docs: add doc for use callback ref
This commit is contained in:
parent
312cc2b4d4
commit
d59bcb301f
44
docs/docs/core/content-manager/hooks/use-callback-ref.mdx
Normal file
44
docs/docs/core/content-manager/hooks/use-callback-ref.mdx
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
title: useCallbackRef
|
||||
description: API reference for the useCallbackRef hook in Strapi's Content Manager
|
||||
tags:
|
||||
- content-manager
|
||||
- hooks
|
||||
- refs
|
||||
- callbacks
|
||||
- effects
|
||||
---
|
||||
|
||||
A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
|
||||
prop or avoid re-executing effects when passed as a dependency. Helpful for working with `modifiedData`
|
||||
or `initialData` in the content-manager.
|
||||
|
||||
Stolen from [`@radix-ui/react-use-callback-ref`](https://www.npmjs.com/package/@radix-ui/react-use-callback-ref).
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
import { useCallbackRef } from 'path/to/hooks';
|
||||
|
||||
const MyComponent = ({ callbackFromSomewhere }) => {
|
||||
const mySafeCallback = useCallbackRef(callbackFromSomewhere);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event) => {
|
||||
mySafeCallback(event);
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [mySafeCallback]);
|
||||
|
||||
return <div>{children}</div>;
|
||||
};
|
||||
```
|
||||
|
||||
## Typescript
|
||||
|
||||
```ts
|
||||
function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T;
|
||||
```
|
||||
@ -36,6 +36,11 @@ const sidebars = {
|
||||
type: 'category',
|
||||
label: 'Hooks',
|
||||
items: [
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'useCallbackRef',
|
||||
id: 'core/content-manager/hooks/use-callback-ref',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'useDragAndDrop',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user