-
-
Notifications
You must be signed in to change notification settings - Fork 414
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Docs/add use event callback documentation (#481)
* π Add docs for `useEventCallback` * π Add demo for `useEventCallback` * β Add unit tests for `useEventCallback` * βοΈ Remove useless comment in useLocalStorage's demo * π Add changeset * π Update README
- Loading branch information
Showing
8 changed files
with
65 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"usehooks-ts": patch | ||
--- | ||
|
||
Release documentation for `useEventCallback` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
packages/usehooks-ts/src/useEventCallback/useEventCallback.demo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { useEventCallback } from './useEventCallback' | ||
|
||
export default function Component() { | ||
const handleClick = useEventCallback(event => { | ||
// Handle the event here | ||
console.log('Clicked', event) | ||
}) | ||
|
||
return <button onClick={handleClick}>Click me</button> | ||
} |
22 changes: 22 additions & 0 deletions
22
packages/usehooks-ts/src/useEventCallback/useEventCallback.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
The `useEventCallback` hook is a utility for creating memoized event callback functions in React applications. It ensures that the provided callback function is memoized and stable across renders, while also preventing its invocation during the render phase. | ||
|
||
See: [How to read an often-changing value from useCallback?](https://legacy.reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback) | ||
|
||
### Parameters | ||
|
||
- `fn: (args) => result` - The callback function to be memoized. | ||
|
||
### Return Value | ||
|
||
- `(args) => result` - A memoized event callback function. | ||
|
||
### Features | ||
|
||
- **Memoization**: Optimizes performance by memoizing the callback function to avoid unnecessary re-renders. | ||
- **Prevents Invocation During Render**: Ensures the callback isn't called during rendering, preventing potential issues. | ||
- **Error Handling**: Throws an error if the callback is mistakenly invoked during rendering. | ||
- **Strict Mode Compatibility**: Works seamlessly with React's strict mode for better debugging and reliability. | ||
|
||
### Notes | ||
|
||
Avoid using `useEventCallback` for callback functions that depend on frequently changing state or props. |
25 changes: 25 additions & 0 deletions
25
packages/usehooks-ts/src/useEventCallback/useEventCallback.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { fireEvent, render, renderHook, screen } from '@testing-library/react' | ||
|
||
import { useEventCallback } from './useEventCallback' | ||
|
||
describe('useEventCallback()', () => { | ||
it('should not call the callback during render', () => { | ||
const fn = vi.fn() | ||
const { result } = renderHook(() => useEventCallback(fn)) | ||
|
||
render(<button onClick={result.current}>Click me</button>) | ||
|
||
expect(fn).not.toHaveBeenCalled() | ||
}) | ||
|
||
it('should call the callback when the event is triggered', () => { | ||
const fn = vi.fn() | ||
const { result } = renderHook(() => useEventCallback(fn)) | ||
|
||
render(<button onClick={result.current}>Click me</button>) | ||
|
||
fireEvent.click(screen.getByText('Click me')) | ||
|
||
expect(fn).toHaveBeenCalled() | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 0 additions & 1 deletion
1
packages/usehooks-ts/src/useLocalStorage/useLocalStorage.demo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters