how does react props merge state passed from parent component and redux store

Question

I my case, my child component needs to get a state named like myDepartment. If I use @connect to fetch that variable from redux (let's say the value here is 'deptA') and pass another variable with the same name(with value 'deptB') from parent component props, what is the value of myDepartment in the child component?

Answer 1

Props mapped using connect override ones passed from the parent with the same name. So in your example myDepartment would always have value deptA .

Just to clarify with some code:

const MyComponent = connect((state) => ({
  myDepartment: state.myDepartment // 'deptA'
}))((props) => (
  <div>{props.myDepartment}</div>
))

// always renders <div>deptA</div>
const Wrapper = () => (
  <MyComponent myDepartment="deptB" /> 
)

Answer 2

Having tried it, it looks as though redux would take priority over a parent:

https://codesandbox.io/s/aged-violet-uoeg6?file=/src/App.js

However, if you were to use the new useSelector react-redux hook (instead of connect) and not destructure props, they would co exist as sharedProp and props.sharedProp (ChildTwo example in sandbox). If you destructure props as {sharedProp}, then you would not be able to create a variable named sharedProp to store the useSelector return.