title: React/react hooks: child component is not re-rendering after the state is changed?
body: <p>I am writing a code in react/react hooks that attempt to do the following.</p>
  
  <p>Get an array of objects from the parent component as a prop
  Set it as a state using <code>useState</code> hook.
  Sort the state according to the intended filters (Time and Rating), and re-render the child component.
  What I see is that the below code updates the state after sorting, but even though the state is updated, the child component that is dependent on the state would not re-render. I thought the child component would automatically re-render whenever the state is changed?</p>
  
  <pre><code>import React, {useState} from 'react';
  import ProfilePostspreview from './ProfilePostspreview';
  
  function ProfileNavigation(props){
     const [newarray, setnewarray]=useState(props.parray);   //'parray' object passed as props and saved as 'newarray' state    
     const otc = () =&gt; {  //Function to sort the state by time and set a new state
         let k=newarray;
         setnewarray(k.sort((a, b) =&gt; (a.time &gt; b.time) ? -1 : 1 ));
     }
     const orc = () =&gt; {  //Function to sort the state by rating and then time and set a new state
         let k=newarray;
         setnewarray(k.sort((a, b) =&gt; (a.rating &gt; b.rating) ? -1 : (a.rating === b.rating) ? ((a.time &gt; b.time) ? -1 : 1) : 1 ));
     }
  
  return (
     &lt;div&gt;
        &lt;div className="sm_options"&gt;    //Component to trigger the otc and orc functions
            &lt;div className="sm_button" id="order_t" onClick={otc}&gt;Sort by time&lt;/div&gt;    
            &lt;div className="sm_button" id="order_r" onClick={orc}&gt;Sort by rating&lt;/div&gt;    
        &lt;/div&gt;
        &lt;div className="posts_preview_columns_p"&gt; //This is dependent on the 'newarray' state but is not re-rendering even after the state is sorted and updated?
        {newarray.map(na=&gt;
        &lt;ProfilePostspreview
            postThumbnail={na.photolink}
            rating={na.rating}
            time={na.time}
            target={na.target}
        /&gt;
        )}
        &lt;/div&gt;
     &lt;/div&gt;
  );
  }
  
  export default ProfileNavigation;
  </code></pre>
  
  <p>What might be the reason for this? Is there something wrong with the code, or is sorting the state not considered powerful enough for React to re-render the child component? If latter is the case, what can be done to force re-render after sorting?</p>
  
  <p>Any advice? Thanks!</p>