用于初始化 useState 钩子的传入属性在调用钩子的更新程序方法时得到更新

Question

Given the following code:

const MyComponent = ({ myObj }) => {
    const [myStatefulObj, setMyStatefulObj] = useState(myObj.subObj)

    const handleChange = () => {
        const updatedObj = { newProperty: Math.random() }
        setMyStatefulObj(updatedObj) // myObj is updated too!
    }

    return <div />
}

I am trying to initialize a new local prop with useState , and hydrating its initial value with a prop that is passed in from a parent component.

When I update my prop using setMyStatefulObj everything works fine, except that it's also updating the prop that's passed into the component.

This is an undesired side effect and one I haven't come across before.

The prop that is getting passed in is from a parent that creates it with a selector from react-redux 's useSelector hook.

There are no actions being dispatched or anything, but simply logging the value of the myObj prop shows that it is indeed being updated every time the local setMyStatefulObj method gets called.

Answer 1

The effect you are describing doesn't make sense and I was not able to reproduce it. Maybe you could create a snippet and share it.

Answer 2

I don't think that was caused by the hooks function.

I have created a simple example in CodeSandBox as you said, and it obviously not reproduced. You can edit this sandbox and try to simulate your situation maybe you can find the root cause.

But since you are using redux, I would suggest you to use useSelector to select the state you need inside hooks function, then you would not have this kind of concern, and it will have better performance(if you pass the prop, every time myObj changes the hooks component will re-render).