Possible bug in hooks sample code
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
In this section:
https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
const handleSubmit = useEventCallback(() => {
alert(text);
}, [text]);
Where useEventCallback is:
function useEventCallback(fn, dependencies) {
const ref = useRef(() => {
throw new Error('Cannot call an event handler while rendering.');
});
useLayoutEffect(() => {
ref.current = fn;
}, [fn, ...dependencies]);
return useCallback(() => {
const fn = ref.current;
return fn();
}, [ref]);
}
Which means useLayoutEffect() is re-run each time fn changes.
Since fn in the example is re-created on each render it means that useLayoutEffect() always re-runs.
But at the same time the fn function can't be not created on each render because it depends on text which is re-defined on each render.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the linked Hooks FAQ section and inspecting the useEventCallback example, especially its useLayoutEffect and useCallback dependencies. Confirm whether the sample behaves as documented, then update the example or its explanation so the intended behavior and completion criteria are clear.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- documentation
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100