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.
@shopify/react-hooks
Advanced tools
@shopify/react-hooks
A collection of primitive React hooks.
$ yarn add @shopify/react-hooks
useDebouncedValue()
This hook provide a debounced value.
function MyComponent() {
const [searchValue, setSearchValue] = useState('');
const debouncedSearch = useDebouncedValue(searchValue);
const {data, loading} = useQuery(SomeQuery, {
variables: {
query: debouncedSearch,
},
});
function handleSearchTextChange(evt: React.KeyboardEvent) {
setSearchValue(evt.currentTarget.value);
}
return <input onChange={handleSearchTextChange} />;
}
useForceUpdate()
This hook provide a forceUpdate
function which will force a component to re-render. This might be useful when you want to re-render after a mutable object gets updated.
const mutableObject = {foo: 'bar'};
export default function ResourceListFiltersExample() {
const forceUpdate = useForceUpdate();
const onClick = () => {
mutableObject.foo = 'bar' + new Date().getTime();
forceUpdate();
};
return <button onClick={onClick}>Click Me</button>;
}
useOnValueChange()
This hook will track a given value and invoke a callback when it has changed.
function MyComponent({foo}: {foo: string}) {
useOnValueChange(foo, (newValue, oldValue) => {
console.log(`foo changed from ${oldValue} to ${newValue}`);
});
return null;
}
useTimeout()
This hook provides a declarative version of setTimeout()
. The first argument is a callback that will be invoked after the given delay (number of milliseconds) as the second argument. Optionally, the timeout can be disabled by passing null
as the delay.
function MyComponent() {
const [status, setStatus] = React.useState('Pending');
const pending = status === 'Pending';
const buttonLabel = pending ? 'Cancel' : 'Reset';
const handleClick = () => setStatus(pending ? 'Cancelled' : 'Pending');
const delay = pending ? 1000 : null;
useTimeout(() => setStatus('Fired'), delay);
return (
<div>
<div>{status}</div>
<button onClick={handleClick}>{buttonLabel}</button>
</div>
);
}
useInterval()
This hook provides a declarative version of setInterval
. The first argument is a callback that will be invoked successively after the given delay (number of milliseconds) as the second argument. Optionally, the interval can be disabled by passing null
as the delay.
function MyComponent() {
const [counter, setCounter] = React.useState(0);
const [enabled, setEnabled] = React.useState(true);
const delay = enabled ? 1000 : null;
const label = enabled ? 'Disable' : 'Enable';
const toggle = () => setEnabled(!enabled);
useInterval(() => setCounter(counter + 1), delay);
return (
<div>
<div>{counter}</div>
<button onClick={toggle}>{label}</button>
</div>
);
}
This is a TypeScript implementation of @gaeron's useInterval
hook from the Overreacted blog post.
useLazyRef()
This hook creates a ref object like React’s useRef
, but instead of providing it the value directly, you provide a function that returns the value. The first time the hook is run, it will call the function and use the returned value as the initial ref.current
value. Afterwards, the function is never invoked. You can use this for creating refs to values that are expensive to initialize.
function MyComponent() {
const ref = useLazyRef(() => someExpensiveOperation());
React.useEffect(() => {
console.log('Initialized expensive ref', ref.current);
});
return null;
}
useMedia()
& useMediaLayout()
This hook will listen to a MediaQueryList created via matchMedia and return true or false if it matches the media query string.
useMediaLayout
is similar to useMedia
but it uses useLayoutEffect
internally to re-render synchronously.
function MyComponent() {
const isSmallScreen = useMedia('(max-width: 640px)');
return (
<p>
{isSmallScreen ? 'This is a small screen' : 'This is not a small screen'}
</p>
);
}
useMountedRef()
This hook keeps track of a component's mounted / un-mounted status and returns a ref object like React’s useRef
with a boolean value representing said status. This is often used when a component contains an async task that sets state after the task has resolved.
import React from 'react';
import {useMountedRef} from '@shopify/react-hooks';
function MockComponent() {
const [result, setResult] = React.useState();
const mounted = useMountedRef();
async function handleOnClick() {
const result = await fetchData();
if (mounted.current) {
setData(result);
}
}
return (
<button onClick={handleOnClick} type="button">
Fetch Data
</button>
);
}
usePrevious()
This hook will store the previous value of a given variable.
function Score({value}) {
const previousValue = usePrevious(value);
const newRecord = value > previousValue ? <p>We have a new record!</p> : null;
return (
<>
<p>Current score: {value}</p>
{newRecord}
</>
);
}
useToggle()
This hook will provide an object that contains a boolean state value and a set of memoised callbacks to toggle it, force it to true and force it to false. It accepts one argument that is the initial value of the state. This is useful for toggling the active state of modals and popovers.
function MyComponent() {
const {
value: isActive,
toggle: toggleIsActive,
setTrue: setIsActiveTrue,
setFalse: setIsActiveFalse,
} = useToggle(false);
const activeText = isActive ? 'true' : 'false';
return (
<>
<p>Value: {activeText}</p>
<button onClick={toggleIsActive}>Toggle isActive state</button>
<button onClick={setIsActiveTrue}>Set isActive state to true</button>
<button onClick={setIsActiveFalse}>Set isActive state to false</button>
</>
);
}
FAQs
A collection of primitive React hooks
We found that @shopify/react-hooks demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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.