About useEffect hook:
By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. more
This means that function inside useEffect will be called after rendering of the component. That’s why you have an empty object.
About the error. You have it because React doesn’t remember your users variable – it will be recreated on each render of SetValue component. It will be better to use useState hook to set value in useEffect and remember it on the next render.
And one more note. Don’t forget about passing the second argument in useEffect with an array of dependencies. Now your hook will be called after each render of SetValue component.
Here’s how to use useState hook:
import React, { useState, useEffect } from 'react';
function SetValue(props){
const [users, setUsers] = useState({});
useEffect(() => {
setUsers({ user: 'bob' });
}, [
//here you could pass dependencies, or leave it empty to call this effect only on first render
]);
return <NewComponent users={users} />
}
export default SetValue;