React 18: Getting 'how to read properties of undefined' when accessing state in useEffect
I'm relatively new to this, so bear with me... I've encountered a strange issue with I'm working on a personal project and I'm working with an scenario where I'm trying to access a nested state property inside a `useEffect`, but I'm getting a 'want to read properties of undefined' behavior. My component maintains a state object that looks like this: ```javascript const [formData, setFormData] = useState({ user: { name: '', age: '' }, isSubmitting: false }); ``` I have an effect that triggers whenever the `formData.user.name` changes: ```javascript useEffect(() => { if (formData.user.name) { console.log(`User name updated: ${formData.user.name}`); } }, [formData.user.name]); ``` However, on initial render, I see the behavior in the console, and it points to the line where I access `formData.user.name`. I thought the default state would prevent it from being `undefined` but clearly, that’s not the case. I've also tried adding a check before accessing `formData.user.name`, but it still throws the behavior. I attempted to refactor my state structure to ensure that `user` is always defined: ```javascript const [formData, setFormData] = useState({ user: {}, isSubmitting: false }); ``` But this led to a different scenario as now I have to manage state updates that may not have the expected shape. What would be the best approach to avoid this behavior while still maintaining a clean state management pattern? Is it a common pitfall in React 18, or is there something specific I might be missing in my implementation? Any insight would be greatly appreciated! This is part of a larger application I'm building. Any help would be greatly appreciated! Thanks, I really appreciate it!