error: Calling setState synchronously within an effect can trigger cascading...

drywall_dan

When I define a function that updates state and call it inside useEffect , I get a cascading render lint error. Here is the relevant code: export default function AdminDashboardPage() { const [stats, setStats] = useState<DashboardStats | null>(null); const [recentUsers, setRecentUsers] = useState<RecentUser[]>([]); const [recentSkills, setRecentSkills] = useState<RecentSkill[]>([]); const [topSkills, setTopSkills] = useState<TopSkill[]>([]);...

Originally asked by Pankaj Choudhary on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

This is an issue with newer ESLint rules. I think the array of states that triggers after the api call is causing unnecessary renders. Try using a callback on the fetchDashboardData function, then add fetchDashboardData as a dependency in the useEffect.

Full answer by Shyprogrammer: https://stackoverflow.stackexchange.com/a/80012008 (CC BY-SA 4.0).

Need it done for your business? UphillTech.