The term to look up, or undefined when no dialog is open.
The info (once loaded) and a loading flag.
const { info, loading } = useChemicalInfo('67-64-1');
export function useChemicalInfo(term: string | undefined): {
info?: ChemicalInfo;
loading: boolean;
} {
const [info, setInfo] = useState<ChemicalInfo | undefined>();
const [loading, setLoading] = useState(false);
useEffect(() => {
if (term === undefined) return;
let cancelled = false;
setInfo(undefined);
setLoading(true);
const load = async () => {
const result = await fetchChemicalInfo(term);
if (cancelled) return;
setInfo(result);
setLoading(false);
};
void load();
return () => {
cancelled = true;
};
}, [term]);
return { info, loading };
}
Loads merged chemical details for a term while the dialog is open.