docs: add doc for use callback ref

This commit is contained in:
Josh 2023-01-11 16:58:34 +00:00
parent 312cc2b4d4
commit d59bcb301f
2 changed files with 49 additions and 0 deletions

View 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;
```

View File

@ -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',