Use Effect causing infinite re-renders
Hey everyone, I'm a little confused on how to fix this, I'm fetching a list of engineers which I want to be able to use in a select dropdown, but when trying to map over, and set to state, its causing an infinite re-render, here is my code
function CreateTimesheetScreen({
navigation,
}: RootStackScreenProps<"CreateTimesheet">) {
const { getToken, signOut } = useAuth();
const { user } = useUser();
const [formLoading, setFormLoading] = React.useState(false);
const [engineersValue, setEngineersValue] = React.useState(null);
const [open, setOpen] = React.useState(false);
const [items, setItems] = React.useState<EngineerItem[]>([]);
const [sessionToken, setSessionToken] = React.useState("");
const [date, setDate] = React.useState(new Date());
React.useEffect(() => {
const scheduler = setInterval(async () => {
const token = await getToken();
setSessionToken(token as string);
}, 1000);
return () => clearInterval(scheduler);
}, []);
const today = new Date();
const {
control,
handleSubmit,
formState: { errors },
setValue,
setError,
} = useForm({
defaultValues: {
work_provider: "",
date_of_work: today,
order_num: "",
work_item: "",
quantity: "",
notes: "",
gang_price_split: "",
},
});
type Data = {
work_provider: string;
date_of_work: string;
order_num: string;
work_item: number;
quantity: string;
notes: string;
gang_price_split: string;
};function CreateTimesheetScreen({
navigation,
}: RootStackScreenProps<"CreateTimesheet">) {
const { getToken, signOut } = useAuth();
const { user } = useUser();
const [formLoading, setFormLoading] = React.useState(false);
const [engineersValue, setEngineersValue] = React.useState(null);
const [open, setOpen] = React.useState(false);
const [items, setItems] = React.useState<EngineerItem[]>([]);
const [sessionToken, setSessionToken] = React.useState("");
const [date, setDate] = React.useState(new Date());
React.useEffect(() => {
const scheduler = setInterval(async () => {
const token = await getToken();
setSessionToken(token as string);
}, 1000);
return () => clearInterval(scheduler);
}, []);
const today = new Date();
const {
control,
handleSubmit,
formState: { errors },
setValue,
setError,
} = useForm({
defaultValues: {
work_provider: "",
date_of_work: today,
order_num: "",
work_item: "",
quantity: "",
notes: "",
gang_price_split: "",
},
});
type Data = {
work_provider: string;
date_of_work: string;
order_num: string;
work_item: number;
quantity: string;
notes: string;
gang_price_split: string;
};
