Search code examples
reactjsreduxreact-hooksreact-redux

Will updated prop values in the `useSelector` callback be used when they change?

I'd like to use a prop value from my component to retrieve a value from redux.

Will changes to that prop value trigger effects and a re-render?

For example, in the code below, would a change to the organizationId prop from a calling component result in the console message being logged with the new name?

import React, { useEffect } from "react";
import { useSelector } from "react-redux";

function MyComponent({ organizationId }) { 

  const organizationName = useSelector(state => 
    state.organizations[organizationId].name
  );
  
  useEffect(() => {
    console.log(`organizationName changed to ${organizationName}`);
  }, [organizationName]);

  return (
    <>{organizationName}</>
  );
}
Solution

  • Yes it will. The effect will be called because the organizationName is listed as a dependency.