How to use recoil - 8 common examples

export const useStudySummaries = (action: Action): StudySummary[] => {
  const [studySummaries, setStudySummaries] = useRecoilState(
    studySummariesState
  )

  useEffect(() => {
    action.updateStudySummaries(setStudySummaries)
    const intervalId = setInterval(function () {
      action.updateStudySummaries(setStudySummaries)
    }, 10 * 1000)
    return () => clearInterval(intervalId)
  }, [])

  return studySummaries
}

export const useStudyDetail = (
  action: Action,
  studyId: number
): StudyDetail | null => {
  const [studyDetails, setStudyDetails] = useRecoilState(
    studyDetailsState
  )

  useEffect(() => {
    action.updateStudyDetail(studyId, studyDetails, setStudyDetails)
    const intervalId = setInterval(function () {
      action.updateStudyDetail(studyId, studyDetails, setStudyDetails)
    }, 10 * 1000)
    return () => clearInterval(intervalId)
  }, [])

  return studyDetails[studyId] || null
}

export const actionCreator = () => {
  const { enqueueSnackbar } = useSnackbar()
  const [studySummaries, setStudySummaries] = useRecoilState(
    studySummariesState
  )
  const [studyDetails, setStudyDetails] = useRecoilState(
    studyDetailsState
  )

  const updateStudySummaries = (successMsg?: string) => {
    getStudySummariesAPI()
      .then((studySummaries: StudySummary[]) => {
        setStudySummaries(studySummaries)

        if (successMsg) {
          enqueueSnackbar(successMsg, { variant: "success" })
        }
      })
      .catch((err) => {
        enqueueSnackbar(`Failed to fetch study list.`, {
          variant: "error",
        })

export const actionCreator = () => {
  const { enqueueSnackbar } = useSnackbar()
  const [studySummaries, setStudySummaries] = useRecoilState(
    studySummariesState
  )
  const [studyDetails, setStudyDetails] = useRecoilState(
    studyDetailsState
  )

  const updateStudySummaries = (successMsg?: string) => {
    getStudySummariesAPI()
      .then((studySummaries: StudySummary[]) => {
        setStudySummaries(studySummaries)

        if (successMsg) {
          enqueueSnackbar(successMsg, { variant: "success" })
        }
      })
      .catch((err) => {

import { atom } from "recoil"

export const studySummariesState = atom({
  key: "studySummaries",
  default: [],
})

export const studyDetailsState = atom({
  key: "studyDetails",
  default: {},
})

import { atom } from "recoil"

export const studySummariesState = atom({
  key: "studySummaries",
  default: [],
})

export const studyDetailsState = atom({
  key: "studyDetails",
  default: {},
})

export const StudyList: FC<{}> = () => {
  const classes = useStyles()
  const [openNewStudyDialog, setOpenNewStudyDialog] = React.useState(false)
  const [openDeleteStudyDialog, setOpenDeleteStudyDialog] = React.useState(
    false
  )
  const [deleteStudyID, setDeleteStudyID] = React.useState(-1)
  const [newStudyName, setNewStudyName] = React.useState("")
  const [maximize, setMaximize] = React.useState(false)

  const action = actionCreator()
  const studies = useRecoilValue(studySummariesState)

  const newStudyNameAlreadyUsed = studies.some(
    (v) => v.study_name === newStudyName
  )

  useEffect(() => {
    action.updateStudySummaries()
  }, [])

  const columns: DataGridColumn[] = [
    {
      field: "study_id",
      label: "Study ID",
      sortable: true,
    },
    {

export const useStudyDetailValue = (studyId: number): StudyDetail | null => {
  const studyDetails = useRecoilValue(studyDetailsState)
  return studyDetails[studyId] || null
}