This is a collection of basic React hooks that are an extension of the React core library.
npm install react-base-hooksThis is a collection of basic React hooks that are an extension of the React core library.
#### Installation
``
npm install react-base-hooks
useLazyValue calls the provided factory on mount and returns this value for the duration of the component's lifecycle. See React docs on .
`js`
import {useLazyValue} from 'react-base-hooks';
function MyComponent() {
const animatedValue = useLazyValue(() => new Animated.Value());
...
}
Another common use case is creating a debounced handler.
`js`
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.
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).
`js`
import {useForceUpdate} from 'react-base-hooks';
function MyComponent() {
const forceUpdate = useForceUpdate();
useEffect(() => DataStore.subscribe(() => forceUpdate()), []);
return {DataStore.data};
}
Just like useMemo but is guaranteed to return the same value if provided deps don't change.
`js``
import {useStableMemo} from 'react-base-hooks';
function MyComponent({input}) {
const instance = useStableMemo(() => createInstance(input), [input]);
...
}