Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
use-callback-ref
Advanced tools
The use-callback-ref npm package provides React hooks for creating and managing callback refs in a more convenient and powerful way. It allows for the creation of refs that can execute a callback function whenever the ref changes, enabling more reactive and dynamic interactions with DOM elements or component instances in React applications.
Creating a callback ref
This feature allows the creation of a callback ref that executes a callback function whenever the ref's current element changes. In this example, the callback updates the state with the height of the element.
import { useCallbackRef } from 'use-callback-ref';
const MyComponent = () => {
const [height, setHeight] = useState(0);
const ref = useCallbackRef(null, (element) => {
if (element !== null) {
setHeight(element.getBoundingClientRect().height);
}
});
return <div ref={ref}>Content</div>;
};
Using a callback ref with useEffect
This demonstrates how to use a callback ref in conjunction with useEffect to perform actions whenever the ref's current element changes. The callback ref updates a state variable, which triggers the useEffect hook.
import { useCallbackRef } from 'use-callback-ref';
import { useEffect } from 'react';
const MyComponent = () => {
const [node, setNode] = useState(null);
const ref = useCallbackRef(null, setNode);
useEffect(() => {
if (node) {
// Perform actions with the node
}
}, [node]);
return <div ref={ref}>Content</div>;
};
The react-use library is a collection of essential React hooks. It includes a wide variety of hooks for different purposes, including some that can be used to achieve similar functionality to use-callback-ref, such as managing refs and executing effects based on ref changes. However, react-use offers a broader scope of hooks beyond just managing callback refs.
use-referee is a smaller, more focused package that provides hooks for managing refs in React, similar to use-callback-ref. It offers a straightforward approach to creating and managing refs, but it might not have the same level of customization or additional features found in use-callback-ref.
Keep in mind that useRef doesn't notify you when its content changes. Mutating the .current property doesn't cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use
a callback ref instead.... useCallbackRef instead.
API is 99% compatible with React createRef
and useRef
, and just adds another argument - callback
,
which would be called on ref update.
createCallbackRef(callback)
- would call provided callback when ref is changed.useRef(initialValue, callback)
- would call provided callback when ref is changed.import {useRef, createRef, useState} from 'react';
import {useCallbackRef, createCallbackRef} from 'use-callback-ref';
const Component = () => {
const [,forceUpdate] = useState();
// I dont need callback when ref changes
const ref = useRef(null);
// but sometimes - it could be what you need
const anotherRef = useCallbackRef(null, () => forceUpdate());
useEffect( () => {
// now it's just possible
}, [anotherRef.current]) // react to dom node change
}
MIT
FAQs
The same useRef, but with callback
The npm package use-callback-ref receives a total of 5,932,815 weekly downloads. As such, use-callback-ref popularity was classified as popular.
We found that use-callback-ref demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.