Skip to main content

useRecoilValue(state)

Returns the value of the given Recoil state.

This hook will implicitly subscribe the component to the given state.


function useRecoilValue<T>(state: RecoilValue<T>): T;

This is the recommended hook to use when a component intends to read state without writing to it, as this hook works with both read-only state and writeable state. Atoms are writeable state while selectors may be either read-only or writeable. See selector() for more info.

Using this hook in a React component will subscribe the component to re-render when the state is updated. This hook may throw if the state has an error or is pending asynchronous resolution. Please see this guide.

Example#

import {atom, selector, useRecoilValue} from 'recoil';
const namesState = atom({
key: 'namesState',
default: ['', 'Ella', 'Chris', '', 'Paul'],
});
const filteredNamesState = selector({
key: 'filteredNamesState',
get: ({get}) => get(namesState).filter((str) => str !== ''),
});
function NameDisplay() {
const names = useRecoilValue(namesState);
const filteredNames = useRecoilValue(filteredNamesState);
return (
<>
Original names: {names.join(',')}
<br />
Filtered names: {filteredNames.join(',')}
</>
);
}