아래의 selector 는 속성 계산에 사용되는 함수인 get만 쓰인 형태로, 상태(atom 이나 다른 selector)를 조회할 수 있는 읽기 전용 selector 이다.

당연히 읽기 전용이기 때문에 업데이트 함수를 주는 useRecoilState와는 사용할 수 없으며 useRecoilValue로만 상태를 조회해야 한다. (key는 내부적으로 selector를 식별하는데 사용되는 고유한 문자열이다.)

// global.js
const fontSizeLabelState = selector({
	key: 'fontSizelabelState',
	get: ({get}) => {
		const fontSize = get(fontSizeState); // fontSizeState 는 atom (구독)
		const unit = 'px';
		return '${fontSize}${unit}';
	},
});

// App.jsx
function FontButton() {
	const [fontSize, setFontSize] = useRecoilState(fontSizeState);
	const fontSizeLabel = useRecoilValue(fontSizeLabelState);

	const onClick = () => setFontSize(fontSize + 1);

	return (
		<>
			<div>Current font size: {fontSizeLabel}</div>
			<button onClick={onClick} style={{fontSize}}>
				Click to Enlarge
			</button>
		</>
	);
}

읽기 전용 selector 에서 아래와 같이 실제로 사용하는 atom 이나 selector에 따라 동적으로 종속성이 결정되게 할 수도 있다.

const toggleState = atom({
	key: 'Toggle',
	default: false
});

const mySelector = selector({
	key: 'MySelector',
	get: ({get}) => {
		const toggle = get(toggleState);
		if(toggle) {
			return get(selectorA);
		} else {
			return get(selectorB);
		}
	},
});