Callback with React

[fireworksgod]

Select Topic Area

Question

Body

How many steps I can pass callback function?

[minion-star]

Maybe It is 7 steps.
It can cause runtime error.
In this case, you can use redux or context api.

[fireworksgod]

Thanks.

[minion-star]

export const PatientListContext = createContext<Patient[] | undefined>(undefined);

const PatientListProvider: React.FC = ({ children }) => {

const [patientList, setPatientList] = useState<Patient[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);

useEffect(() => {
    const fetchPatients = async () => {
        try {
            const response = await axios.get("http://localhost:5000/api/general");
            setPatientList(response.data); // Assuming the response contains an array of patient data
            setLoading(false);
            
        } catch (error) {
            console.error("Error fetching patients:", error);
            setError("Failed to load patient data. Please try again.");
            setLoading(false);
        }
    };

    fetchPatients();
},[patientList] );

if (loading) return <Box sx={{ display: 'flex',position:"absolute", left:"50%", top:"50%" }}><CircularProgress color="success" /></Box>;

return (
    <PatientListContext.Provider value={patientList}>
        {children}
    </PatientListContext.Provider>
);

};

export default PatientListProvider;