const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

//

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return (
  	<div>
  		<p style={{fontSize}}>font size change</p>
			<button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
	        Click to Enlarge
      </button>
  	</div>
  );
}

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

  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>

      <button onClick={setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}