title: How to handle useReducer dispatch on props change?
body: <p>At the outset I'd like to say that I'm a React beginner and I'm stuck! And I've no idea how to proceed.
  I'll be very happy if someone can either help me get my current code working or suggest an alternate approach.</p>
  <p>So the most simple background is that I have a React app running on Electron framework to build a desktop application that reads in a JSON file and performs various tasks which includes displaying trees and graphs from the JSON data. To show the graph I have a multiple Menu components which allow the user to select what they want to see. The current state of the Menus are maintained by a component called the <code>MainPane</code> which uses a custom hook called <code>useMenuState</code> for maintaining the menu state (this hook uses only useState).</p>
  <p>The values from <code>useMenuState</code> hook are passed by the <code>MainPane</code> as props to a component called the <code>TreeViewer</code> which uses another custom hook called <code>useTreeState</code> which uses a useReducer hook  (to generate current tree using the information provided in the props). The custom hook returns the tree data and dispatcher function provided by the reducer hook.</p>
  <p>To be able to show a different tree when user selects a new menu option, I have added a <code>useEffect</code> hook in the <code>TreeViewer</code> component which calls the dispatch function.
  So I've added the values from the prop in the dependancy array of the <code>useEffect</code> function.</p>
  <p>But the effect function is not running when the props change? As far as I can tell, all props being passed are created as new objects and no object state is mutated.</p>
  <p>Here is a simple representation of my code (it has all the bits I talked about).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// CUSTOM HOOK useMenuState
  const useMenuState = (props) =&gt; {
      const [menu1State, updateMenu1] = useState();
      const [menu2State, updateMenu2] = useState();
  
      const handleMenuClick = (pMenuIdx, pClickedVal) = {
          // generate and update respective menu state value using the jsonObj in props
      };
  
      let menuState = {
          menu1: menu1State,
          menu2: menu2State
      };
  
      return { menuState, menuClickHandler:handleMenuClick};
  
  }
  
  // COMPONENT MainPane
  const MainPane = (props) =&gt; {
      // props here gets a object that manages the data in the JSON file
  
      const {menuState, menuClickHandler} = useMenuState({...props});
  
      let treeViewerProps = {
          treeType: menuState.menu1,
          treeID: menuState.menu2,
          jsonObj: props.jsonObj
      };
  
      return (&lt;TreeViewer {...treeViewerProps} /&gt;);
  }
  
  
  // CUSTOM HOOK useTreeState
  const useTreeState = (props) =&gt; {
      const updaterFunction = (currentTreeState, action) =&gt; {
          // update tree state as per action and return
      }
  
      let initTreeState = {} // build initial state of the tree
  
      const [treeObj, treeUpdateDispatcher] = useReducer(updaterFunction, initTreeState);
  
      let treeStateObj = { treeData: treeObj, treeUpdater: treeUpdateDispatcher };
  
      return treeStateObj;
  }
  
  // COMPONENT TreeViewer
  const TreeViewer = (props) =&gt; {
  
      let treeStateProps = {
          jsonObj: props.jsonObj,
          treeType: props.treeType,
          treeID: props.treeID
      }
  
      useEffect(()=&gt;{
          treeUpdater({type:'NEW TREE', id: props.treeID})
      }, [props.treeType, props.treeID]); // look for changes in the tree type or ID and call the dispatch function
  
      const { treeData, treeUpdater } = useTreeState(treeStateProps); // custom hook to handle tree State
  
      return (&lt;Tree data={treeData} /&gt;);
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Why isn't the useEffect hook running when the props change?
  Is there a better way to handle this?
  Any pointers will be hugely appreciated!</p>
  <p>Thanks in advance!</p>