title: alternative of useEffect for react hooks
body: <p>First, I run a graphql query and then use its results to render some items using the <code>FlatList</code>. This works fine.</p>
  <p>On another screen, I run another mutation using apollos <strong>refetch</strong> option, such that whenever that mutation is successful, the first query will refetch data where ever it is used. The refetching part works fine and I have tested it on other screens. So automatically, the <code>data</code> in <code>WhiteList</code> is <strong>updated</strong>.</p>
  <p>However the <code>friendList</code> is <strong>not updated</strong> so the <strong>FlatList doesn't get updated</strong>.</p>
  <p>How can I fix this? <code>useEffect</code>could have been an option but using the custom graphql hook inside it gives me <code>invalid hook call</code> error. What else can I do?</p>
  <pre><code>export const WhitelistBar: React.FC = () =&gt; {
    const [friendList, setFriendList] = useState&lt;Friend[]&gt;();
    const [originatorId, setOriginatorId] = useState&lt;number&gt;();
  
    useEffect(() =&gt; {
      //console.log('friendlist', friendList);
    }, [useGetMyProfileQuery]);
    
    const _onCompleted = (data) =&gt; {
      console.log('running', data);
      let DATA = data.me.friends.nodes.map(
        (item: {
          id: number;
          firstName: string;
          rating: number;
          vehicles: Vehicle[];
          friends: UserConnection;
        }) =&gt; ({
          id: item.id,
          imageUrl: defaultUrl,
          name: item.firstName,
          rating: item.rating,
          vehicles: item.vehicles,
          numberOfFriends: item.friends.totalCount,      
        }),
      );
      setFriendList(DATA);
      console.log('daattaaa', DATA);
      setOriginatorId(data.me.id)
    };
  
    const _onError = () =&gt; {
      let DATA = [
        {
          id: 1,
          imageUrl: defaultUrl,
          name: 'Friend',
        },
        {
          id: 2,
          imageUrl: defaultUrl,
          name: 'Friend',
        },
        {
          id: 3,
          imageUrl: defaultUrl,
          name: 'Friend',
        },
      ];
      setFriendList(DATA);
      setOriginatorId(0);
    };
  
    const { data } = useGetMyProfileQuery({
      onCompleted: _onCompleted,
      onError: _onError,
    });
  
    return (
      &lt;View style={scaledStyles.container}&gt;
        &lt;View style={scaledStyles.whiteListBarTitle}&gt;
          &lt;Text style={scaledStyles.whiteListBarText}&gt;Meine Freunde&lt;/Text&gt;
        &lt;/View&gt;
        &lt;View style={{ flexDirection: 'row' }}&gt;
          &lt;FlatList
            showsHorizontalScrollIndicator={false}
            data={friendList}
            horizontal={true}
            renderItem={({ item }) =&gt; (
              &lt;WhitelistItem
                title={item.name}
                face={item.imageUrl}
                numberOfFriends={item.numberOfFriends}
                vehicles={item.vehicles}
              /&gt;
            )}
            keyExtractor={(item) =&gt; item.id.toString()}
          /&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>
  <p>Edit:</p>
  <p>I also tried this but this renders nothing for now:</p>
  <pre><code> const showFlatList = (friendList: Friend[] | undefined) =&gt; {
      return (
        &lt;FlatList
          showsHorizontalScrollIndicator={false}
          data={friendList}
          horizontal={true}
          scrollEnabled
          renderItem={({ item }) =&gt; (
            &lt;WhitelistItem
              title={item.name}
              face={item.imageUrl}
              firstName={item.name}
              rating={item.rating}
              numberOfFriends={item.numberOfFriends}
              vehicles={item.vehicles}
              originatorId={originatorId}
            /&gt;
          )}
          keyExtractor={(item) =&gt; item.id.toString()}
        /&gt;
      );
    };
    useEffect(() =&gt; {
      showFlatList(friendList);
    }, [useGetMyProfileQuery]);
  </code></pre>
  <p>and this in the main return instead of the FlatList:</p>
  <pre><code> {data &amp;&amp; showFlatList}
  </code></pre>
  <p>Also, tried this but <code>Argument of type '(DATA: any) =&gt; void' is not assignable to parameter of type 'EffectCallback'.ts(2345)</code></p>
  <pre><code>     useEffect((DATA: any) =&gt; {
          setFriendList(DATA)
        }, [DATA])
  </code></pre>