A simple function that should return true if the two arguments are considered equal, false otherwise.
The requirements for "equality" are entirely up to the implementation.
A Provider like component through which you can override selected dependencies.
A hook that retrieves a value of a certain context when called.
In addition to that it carries a Provider component that can be used to override the context's value.
type of the value kept in the context
A hook that fetches dependencies from a dependency injection layer.
In addition to that it carries a Override component that can be used to override selected dependencies.
shape of dependency object
Aggregates multiple refs into a single one, so that multiple refs can be attached to a single element.
type of the value kept in the ref
Allocates a ref and initializes it with a computed value.
type of the generated value
the factory is used during the initial render only to compute the ref's value
An extension to the useState hook which resets the current value to the initialValue every time the deps change.
type of the state value
initial value or a factory to generate one
array of dependencies
the same result as obtained from useState
Allows you allocate resources synchronously while ensuring they will be properly disposed when the
deps change or when the component gets unmounted.
Works just like useMemo with the addition of the dispose callback.
Note that it is ensured that the previous allocated value will be disposed prior allocating a new one.
type of the allocated value
factory function that returns a tuple of the allocated value and a dispose callback
dependencies of the factory function
the allocated value
Returns always the same instance of the value until it changes according to the equalityFn.
Useful for keeping stable instance of objects whose instances change, but values stay the same.
type of the interned value
value that is expected to change
function to evaluate whether the value changed
Equivalent to useCallback but doesn't suffer from the following
(quoting https://reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations):
You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.
Note: You should not blindly replace all usages of useCallback with this hook.
The useGuaranteedCallback should be used only in scenarios where re-calculating the memoized
value would cause issues.
type of the callback function
the callback function to be memoized
dependencies for the callback (if any of them changes, the memoized callback is dropped and an recent one is stored)
Equivalent to useMemo but doesn't suffer from the following
(quoting https://reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations):
You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.
Note: You should not blindly replace all usages of useMemo with this hook.
The useGuaranteedMemo should be used only in scenarios where re-calculating the memoized
value would cause issues.
type of the memoized value
factory to generate the value that is to be memoized
array of dependencies for the factory (if any of them changes, the memoized value is dropped and a new one is generated)
Warning: It is usually a bad practice to trigger side-effects directly during the render phase. Make sure you really know what you are doing when using this hook!
An alternative to useEffect where the callback is executed right within the render phase.
In other words the effect is performed immediately when the useImmediateEffect is called
and eventual side-effects can be observed right after the useImmediateEffect line.
Note that just like useEffect the useImmediateEffect ensures that a teardown logic will be
executed before any subsequent effect is triggered. Furthermore it is also guaranteed that
the teardown logic will be run in case the component unmounts.
Example:
let sideEffect = 0
useEffect(() => {
sideEffect = 1
},[])
console.log(sideEffect) // outputs 1callback that performs the effect and optionally returns a tear-down logic
array of dependencies for the effect (if any of them changes, the effect is re-triggered)
Caches previous value for usages when current value is not available.
Availability of value is by default determined using value != null.
If more specific control is required, the second argument is here to the rescue.
Passing true to isAvailable marks the provided value as available,
while false will make the function return the cached one.
This hook is useful to keep invalidated values around until a new valid one is obtained.
type of the cached value
value to be cached
optional custom boolean flag to determine "availability"
either cached or the provided value, based on availability
Treats a property of an object as a stand-alone state.
This hook can be used to access a property of a complex state in a transparent way.
The returned value and setter can be treated in the same way as the ones
returned by useState directly.
Usage example:
const [object, setObject] = useState({ a: 'a', b: 1 })
const [b, setB] = useProperty(object, setObject, 'b')
...
return (
<div>
Current value of B: {b}
<button onClick={() => setB(prevB => prevB + 1)}>Increment</button>
</div>
)Note that the above shows very simple case in which it would probably be better to allocate two different states, there are situations though when you either cannot influence this (the object comes from above) or it is beneficial to use the whole object as an atomic unit.
type of the complex state
the actual managed property of O
complex state value
function that updates the complex state by passing the current state into the callback and expecting a modified state back (just like setState(prev => prev + 1)
name of the property of the object that is to be managed
the same output as ˙useState˙, but scoping everything to the provided property
Returns a value computed during the first render using the provided factory. The value is guaranteed to never change.
type of the generated value
factory function to generate the singleton value on the first render (ignored for any subsequent render)
Use a ref of the latest value passed to the useUpdatedRef hook.
type of the value kept in the ref
new value to update the captured one
Creates a useContext hook for a newly allocated context with the specified name.
Example:
const useMyContext = createUseContext({contextName: 'MyContext'})
const MyComponent = () => {
const myValue = useMyContext()
}
const MyApp = () => (
<useMyContext.Provider value={...}>
...
</useMyContext.Provider
)type of the value kept in the context
name of the new context
Creates a useContext hook for a newly allocated context with the specified name and a given default value.
Example:
const useMyContext = createUseContext({contextName: 'MyContext', defaultValue: ... })
const MyComponent = () => {
const myValue = useMyContext()
}
const MyApp = () => (
<useMyContext.Provider value={...}>
...
</useMyContext.Provider
)type of the value kept in the context
name of the new context
default value for the context to be used when no Provider is mounted
Creates a useContext hook for a newly allocated context with the specified name.
Invocation of the hook will fail if there is no value provided through the Provider component.
Example:
const useMyContext = createUseContext({contextName: 'MyContext', nonNull: true, nullMessage: 'Value not available, did you use <useMyContext.Provider> ?' })
const MyComponent = () => {
const myValue = useMyContext()
}
const MyApp = () => (
<useMyContext.Provider value={...}>
...
</useMyContext.Provider
)type of the value kept in the context
name of the new context
always true
a custom error message to be displayed when there is no value provided
This function sets up a very simple context based dependency injection layer.
It creates a useDependencies hook that can be used to fetch the dependencies from any component.
Example:
const useMyDependencies = createUseContext({foo: 'X', bar: 1})
const MyComponent = () => {
const {foo} = useMyDependencies()
...
}
const MyApp = () => (
<useMyDependencies.Override value={{bar: 2}}>
...
</useMyDependencies.Override
)shape of the dependency object
default dependencies or a factory that helps overcome issues with circular dependencies
Generated using TypeDoc
@spicy-hooks/core
API reference
This is a detailed API reference of the
@spicy-hooks/corepackage.For high-level information about this package and installation instructions, please see our GitHub repository.