React useEffect causing infinite loop when setting state based on props
I'm reviewing some code and I've searched everywhere and can't find a clear answer. I've been banging my head against this for hours. I'm relatively new to this, so bear with me. I'm experiencing an infinite loop in my React component when using the `useEffect` hook to set state based on props. I'm passing a `user` object as props to my component, and I want to set a local state variable `userData` whenever the `user` prop changes. However, every time I set `userData`, it triggers a re-render, and the `useEffect` runs again, creating an infinite loop. Here's a simplified version of my code: ```javascript import React, { useEffect, useState } from 'react'; const UserComponent = ({ user }) => { const [userData, setUserData] = useState(null); useEffect(() => { setUserData(user); }, [user]); return <div>{userData ? userData.name : 'Loading...'}</div>; }; ``` I've tried using `useCallback` to memoize the function I pass to `setUserData`, but it hasn't resolved the scenario. I'm also aware of the potential pitfalls of mutating the state directly, but I'm ensuring that I'm not modifying the `user` object itself. The console logs show `user` is a new object on each render, hence why I'm falling into this loop. This is happening in React v17.0.2. Any advice on properly managing state based on props to avoid this infinite loop would be greatly appreciated! Thanks in advance! Any feedback is welcome! I've been using Javascript for about a year now. Has anyone dealt with something similar? I'd be grateful for any help. I'm working on a microservice that needs to handle this.