title: React 16.8 hooks - child component won't re-render after updating parent state
body: <p>I have a functional parent <code>Map</code> component with a few states, one of which is <code>layers</code>, the value of which is set initially from a config. </p>
  
  <p>I then have a child <code>LayerControl</code> component which takes the layers state of the map as its props. The LayerControl component makes some changes and passes them back to the Map with <code>onLayerChange</code> which then subsequently calls the setState method of the layers (<code>setLayers</code>). </p>
  
  <p>From what I understand, this should trigger a re-render of my LayerControl component, but it doesn't. What have I done wrong?</p>
  
  <pre><code>export default function Map(){
  
  const [viewport, setViewport] = useState(mapConfig.viewport);
  const [style, setStyle] = useState(mapConfig.mapStyle);
  const [layers, setLayers] = useState(mapConfig.layers);
  
  function updateLayers(layers){
      setLayers(layers); //why won't LayerControl re-render?
  }
  
  return(
      &lt;MapGL
          zoom={[viewport.zoom]}
          containerStyle={{
              height: "100%",
              width: "100%"
          }}
          style={style}&gt;
          &lt;LayerControl
              onLayerChange={layers =&gt; updateLayers(layers)} 
              layers={layers}
          /&gt;
          &lt;ZoomControl/&gt;
          &lt;ScaleControl/&gt;
      &lt;/MapGL&gt;
  );
  
  }
  </code></pre>