mirror of
https://github.com/strapi/strapi.git
synced 2025-12-16 17:53:53 +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',
|
type: 'category',
|
||||||
label: 'Hooks',
|
label: 'Hooks',
|
||||||
items: [
|
items: [
|
||||||
|
{
|
||||||
|
type: 'doc',
|
||||||
|
label: 'useCallbackRef',
|
||||||
|
id: 'core/content-manager/hooks/use-callback-ref',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'doc',
|
type: 'doc',
|
||||||
label: 'useDragAndDrop',
|
label: 'useDragAndDrop',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user