Recoil fine-grained selectors

recoil-selectors.tsx

const workItemTitleSelector = selectorFamily({
  key: 'WorkItemTitle',
  get:
    (workItemId: string | undefined | null) =>
      ({ get }) => {
        return get(workItems(workItemId)?.title;
    },
});

// only fetch what we need!
function WorkItemCard({ workItemId }: { workItemId: string }) {
  const workItemTitle = useRecoilValue(workItemTitleSelector(workItemId));
  return (
    <div>
      {workItemTitle}
    </div>
  );
}