title: Using memoizing selectors with Hooks in React Native
body: <p>One of the components in my react native app is re-rendering several times causing problems with my derived data.
  I'm using <strong>Redux</strong> to store my state and <strong>useSelector</strong> hook to retrieve the state and use it during rendering. I've read quite a bit about the use of Reselect library to avoid unnecessary rendering and optimise performance but I'm struggling to apply to my ES6 code with hooks.</p>
  
  <p>This is my current code</p>
  
  <pre><code>import { useSelector, useDispatch } from "react-redux";
  import...
  
  const MovieDetailScreen = (props) =&gt; {
    const selectedMovie = useSelector((state) =&gt; state.moviemain.moviemain);
    const selectedMovieCast = useSelector((state) =&gt; state.moviecast.moviecast);
    const selectedMovieCrew = useSelector((state) =&gt; state.moviecast.moviecrew);
  
    return (
     &lt;View style={styles.container}&gt;
       &lt;View&gt;
          &lt;Text style={styles.description} numberOfLines={3}&gt;
             {selectedMovie.name}
          &lt;/Text&gt;            
       &lt;/View&gt;
       &lt;View&gt;
          &lt;Text style={styles.description} numberOfLines={3}&gt;
             {selectedMovie.overview}
          &lt;/Text&gt;            
       &lt;/View&gt;
       &lt;View&gt;
          &lt;Text style={styles.description} numberOfLines={3}&gt;
             {selectedMovie.released_date}
          &lt;/Text&gt;            
       &lt;/View&gt;
       &lt;View style={styles.textLabelRow}&gt;
           {selectedMovie.genres.map((item, id) =&gt; {
             return (
                &lt;Text
                   style={[styles.txtLabel, { backgroundColor: "#404040" }]}
                   key={id}
                   numberOfLines={1}
                &gt;
                   {item.name}
                &lt;/Text&gt;
             );
           })}
       &lt;/View&gt;
     &lt;/View&gt;
     ...
     ...
    );
  };
  </code></pre>
  
  <p>I would like to apply the Reselect to any derived data, in the example code attached it would be the mapping processing of the genres parameter of the selectedMovie state</p>
  
  <pre><code>         {selectedMovie.genres.map((item, id) =&gt; {
             return (
                &lt;Text
                   style={[styles.txtLabel, { backgroundColor: "#404040" }]}
                   key={id}
                   numberOfLines={1}
                &gt;
                   {item.name}
                &lt;/Text&gt;
             );
           })}
  </code></pre>
  
  <p>I have another dozens of similar scenarios where I need to filter data or work out totals and due to re-rendering I often get errors.
  I believe that using Reselect, the function would only be executed if the state changes.</p>
  
  <p>I tried to follow the example in <a href="https://react-redux.js.org/next/api/hooks#useselector" rel="nofollow noreferrer">here</a> by moving my state selection outside my component and restructure my code like this</p>
  
  <pre><code>import...
  import { createSelector } from "reselect";
  
  const getMovie = createSelector(
    (state) =&gt; state.moviemain.moviemain,
    (moviemain) =&gt; moviemain.moviemain.map((item) =&gt; item.genres)
  );
  
  export const GenresList = () =&gt; {
    const genres = useSelector(getMovie);
    return (
      &lt;Text
        style={[styles.txtLabel, { backgroundColor: "#404040" }]}
        numberOfLines={1}
      &gt;
        {genres}
      &lt;/Text&gt;
    );
  };
  
  const MovieDetailScreen = (props) =&gt; {
    const selectedMovie = useSelector((state) =&gt; state.moviemain.moviemain);
    const selectedMovieCast = useSelector((state) =&gt; state.moviecast.moviecast);
    const selectedMovieCrew = useSelector((state) =&gt; state.moviecast.moviecrew);
  
    return (
     &lt;View style={styles.container}&gt;
       ....
       ....
       &lt;View&gt;
          &lt;GenresList /&gt;            
       &lt;/View&gt;
     &lt;/View&gt;
     ...
     ...
    );
  };
  </code></pre>
  
  <p>but I'm getting the following error in the createSelector function
  <strong><em>undefined is not an object (evaluating 'moviemain.moviemain.map')</em></strong></p>
  
  <p>I've tried other suggested solutions having all code within the main components but I get other types of errors.</p>
  
  <p>I'd appreciate some guidance.</p>