react-base-hooks
This is a collection of basic React hooks that are an extension of the React core library.
Installation
npm install react-base-hooks
useLazyValue
useLazyValue
calls the provided factory on mount and returns this value for the duration of the component's lifecycle. See React docs on creating expensive objects lazily.
import {useLazyValue} from 'react-base-hooks';
function MyComponent() {
const animatedValue = useLazyValue(() => new Animated.Value());
...
}
Another common use case is creating a debounced handler.
function MyComponent() {
const onScroll = useLazyValue(() => {
return debounce(() => console.log('debounced scroll'), 1000);
});
...
}
Comparison to useMemo
You cannot rely on useMemo
as a semantic guarantee. React may throw away the cached value and recall your factory even if deps did not change.
Comparison to useState
You can get the same result using useState(factory)[0]
, but it's a little more expensive supporting unused update functionality.
Comparison to useRef
You can implement this yourself as described in React doc's how to create expensive objects lazily. However, useLazyValue
is likely more convenient and hides the ref.current
implementation detail.
useForceUpdate
Provides the same functionality as forceUpdate
in React class components. Useful when your component relies on data outside React's purview (external data or refs).
import {useForceUpdate} from 'react-base-hooks';
function MyComponent() {
const forceUpdate = useForceUpdate();
useEffect(() => DataStore.subscribe(() => forceUpdate()), []);
return <div>{DataStore.data}</div>;
}
useStableMemo
Just like useMemo
but is guaranteed to return the same value if provided deps don't change.
import {useStableMemo} from 'react-base-hooks';
function MyComponent({input}) {
const instance = useStableMemo(() => createInstance(input), [input]);
...
}