title: React useState not triggering re-render of child component
body: <p>I cant seem to figure out why my MovieDetailCard component will not re-render when the movie state changes. I am passing in the movie object. When I update the state the log outputs correctly in the useEffect but the MovieDetailsCard never receives the updated object.</p>
  
  <pre><code>    const MovieDetails = () =&gt; {
      const [movie, setMovie] = useState({});
      const { id } = useParams();
      const { poster } = useParams();
  
    useEffect(() =&gt; {
      const fetchMovie = async () =&gt; {
        const response = await fetch(
          `http://www.randyconnolly.com/funwebdev/3rd/api/movie/movies.php?id=${id}`
        );
  
        const data = await response.json();
  
        setMovie({ ...data });
      };
  
      fetchMovie();
    }, []);
  
    useEffect(() =&gt; {
      console.log(movie); // this successfully outputs when movie updates
    }, [movie]);
  
    return (
      &lt;div className="row"&gt;
        &lt;div className="col s12 m6"&gt;
          &lt;MovieDetailsCard poster={poster} movie={movie} /&gt; // this does not update
        &lt;/div&gt;
        &lt;div className="col s12 m6"&gt;
          &lt;CastCrewCard /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Below is the MovieDeatailsCard. In the useEffect the console.log(movie) always returns null.</p>
  
  <pre><code>const MovieDetailsCard = ({ poster, movie }) =&gt; {
    useEffect(() =&gt; {
      console.log("in details");
  
      console.log(movie);
    }, []);
    return (
      &lt;div className="card"&gt;
        &lt;div className="card-content"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col s6"&gt;
              &lt;span className="card-title"&gt;Movie Title&lt;/span&gt;
            &lt;/div&gt;
            &lt;div className="col s6 favouriteButton"&gt;
              &lt;FavouriteButton className="waves-effect waves-light btn"&gt;
                &lt;i className="material-icons"&gt;favorite&lt;/i&gt;
              &lt;/FavouriteButton&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className="row"&gt;
            &lt;div className="col s12 m6"&gt;
              &lt;img src={`https://image.tmdb.org/t/p/w342/${poster}.jpg`} alt="" /&gt;
            &lt;/div&gt;
            &lt;div className="col s12 m6"&gt;
              &lt;p&gt;{movie.title}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default MovieDetailsCard;
  </code></pre>