title: React (Hooks) child component not re-rendering when parent's state changes
body: <p>I understand this is a somewhat common question but I can't quite find answers here that match my situation.</p>
  <p>I have a parent component that is successfully re-rendering whenever I update data using a child component. I also have a separate child component that displays more detailed info and it's this component that I want to re-render so it will display the new, updated information.</p>
  <p>I'm passing the data from the parent to the child as props. I understand that changes in props won't cause a re-render, only a change in state will initiate a re-render, but I'm not sure how to do this.</p>
  <p>My parent component is called &quot;StudentList&quot; and just displays a list of students.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { useQuery } from &quot;@apollo/client&quot;;
  import { getStudents } from &quot;../queries&quot;;
  import StudentDetails from &quot;./StudentDetails&quot;;
  
  
  const StudentList = () =&gt; {
    const [student, setStudent] = useState(&quot;&quot;);
    
    const { loading, error, data } = useQuery(getStudents);
    if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;
    if (error) return &lt;p&gt;Error!&lt;/p&gt;;
  
    const handleClick = (student)=&gt; {
      //console.log(student)
    
      setStudent(student);
    };
  let filteredStudents = [];
  
  //console.log(data.students)
  
  for(let i = 0; i &lt; data.students.length; i++){
    //console.log(data.students[i].class.name)
    if(data.students[i].class.name === &quot;1FE1&quot;){
      //console.log(data.students[i].name)
      filteredStudents.push(data.students[i])
    }
    
  }
  
  //console.log(filteredStudents);
    
    return (
      &lt;div&gt;
        &lt;ul id=&quot;student-list&quot;&gt;
          {data.students.map((student) =&gt; (
            &lt;li key={student.id} onClick={(e) =&gt; handleClick(student)}&gt;{student.name}&lt;/li&gt;
          ))}
          
        &lt;/ul&gt;
        {
          student ? &lt;StudentDetails student={student} /&gt; 
          : &lt;p&gt;No Student Selected&lt;/p&gt;
          
        }
      &lt;/div&gt;
    );
  };
  
  export default StudentList;
  
  </code></pre>
  <p>EditStudent component below.</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { useMutation } from &quot;@apollo/react-hooks&quot;;
  import StudentDetails from &quot;./StudentDetails&quot;;
  import { editStudentMutation, getStudentQuery, getStudents } from &quot;../queries/index&quot;;
  
  
  const EditStudent = (props) =&gt; {
      console.log(props)
      const [name, setName] = useState(); 
      const [age, setAge] = useState();
      const [test, setTest] = useState();
      const [editStudent] = useMutation(editStudentMutation);
  
      return (
      
          &lt;form id=&quot;edit-student&quot; 
              onSubmit={(e) =&gt; {
                  e.preventDefault();
                  editStudent({
                  variables: {
                      id: props.id,
                      name: name,
                      age: age,
                      test1: test
                  },
                  refetchQueries: [{ query: getStudents}]
                  });
              }}&gt;
              &lt;div className=&quot;field&quot;&gt;
                  &lt;label&gt;Student Name:&lt;/label&gt;
                  &lt;input type=&quot;text&quot;
                   value={name}
                   onChange={(e) =&gt; setName(e.target.value)}/&gt;
              &lt;/div&gt;
              &lt;div className=&quot;field&quot;&gt;
                  &lt;label&gt;Age:&lt;/label&gt;
                  &lt;input type=&quot;text&quot;
                   value={age}
                   onChange={(e) =&gt; setAge(e.target.value)}/&gt;
              &lt;/div&gt;
              &lt;div className=&quot;field&quot;&gt;
                  &lt;label&gt;Test One:&lt;/label&gt;
                  &lt;input type=&quot;text&quot;
                   value={test}
                   onChange={(e) =&gt; setTest(e.target.value)}/&gt;
              &lt;/div&gt;
              &lt;button&gt;submit&lt;/button&gt;
          &lt;/form&gt;
      )
  }
  
  export default EditStudent;
  </code></pre>
  <p>From StudentList I can click on an individual student and display their info in the &quot;StudentDetails&quot; component.</p>
  <pre><code>import React from &quot;react&quot;;
  import { useEffect, useState } from &quot;react&quot;;
  import { getStudentQuery } from &quot;../queries&quot;;
  import { useQuery } from &quot;@apollo/client&quot;;
  import DeleteStudent from &quot;./DeleteStudent&quot;
  import EditStudent from &quot;./EditStudent&quot;;
  
  
  const StudentDetails = (props)=&gt; {
      return (
          &lt;div id=&quot;student-details&quot; &gt;
              &lt;h2&gt;Name: {props.student.name}&lt;/h2&gt;
              &lt;h3&gt;Age: {props.student.age}&lt;/h3&gt;
              &lt;h3&gt;Class: {props.student.class.name}&lt;/h3&gt;
              &lt;h3&gt;Test 1 Score: {props.student.test1}&lt;/h3&gt;
              &lt;DeleteStudent id={props.student.id}/&gt;
              &lt;EditStudent id={props.student.id} /&gt;
          &lt;/div&gt;
          
      )
      
  }
  
  export default StudentDetails;
  </code></pre>
  <p>Inside StudentDetails is a third component called &quot;EditStudent&quot; which displays a form to update/edit any student's information.</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { useMutation } from &quot;@apollo/react-hooks&quot;;
  //import { getStudents } from &quot;../queries&quot;;
  import StudentDetails from &quot;./StudentDetails&quot;;
  import { editStudentMutation, getStudentQuery, getStudents } from &quot;../queries/index&quot;;
  
  
  const EditStudent = (props) =&gt; {
      console.log(props)
      const [name, setName] = useState(); 
      const [age, setAge] = useState();
      const [test, setTest] = useState();
      const [editStudent] = useMutation(editStudentMutation);
  
      return (
      
          &lt;form id=&quot;edit-student&quot; 
              onSubmit={(e) =&gt; {
                  e.preventDefault();
                  editStudent({
                  variables: {
                      id: props.id,
                      name: name,
                      age: age,
                      test1: test
                  },
                  refetchQueries: [{ query: getStudents}]
                  });
              }}&gt;
              &lt;div className=&quot;field&quot;&gt;
                  &lt;label&gt;Student Name:&lt;/label&gt;
                  &lt;input type=&quot;text&quot;
                   value={name}
                   onChange={(e) =&gt; setName(e.target.value)}/&gt;
              &lt;/div&gt;
              &lt;div className=&quot;field&quot;&gt;
                  &lt;label&gt;Age:&lt;/label&gt;
                  &lt;input type=&quot;text&quot;
                   value={age}
                   onChange={(e) =&gt; setAge(e.target.value)}/&gt;
              &lt;/div&gt;
              &lt;div className=&quot;field&quot;&gt;
                  &lt;label&gt;Test One:&lt;/label&gt;
                  &lt;input type=&quot;text&quot;
                   value={test}
                   onChange={(e) =&gt; setTest(e.target.value)}/&gt;
              &lt;/div&gt;
              &lt;button&gt;submit&lt;/button&gt;
          &lt;/form&gt;
      )
  }
  
  export default EditStudent;
  </code></pre>
  <p>As I mentioned, EditStudent successfully which then makes StudentList re-render. My problem has been getting StudentDetails to re-render. I've been trying various different things with useEffect to force a re-render but I'm not sure in which component I would need to do this. Any hints would be appreciated.</p>