title: How to refresh page in React native?
body: <p>My dev env is</p>
  <blockquote>
  <p>&quot;react&quot;: &quot;17.0.1&quot;,
  &quot;react-dom&quot;: &quot;17.0.1&quot;,
  &quot;react-hook-form&quot;: &quot;^7.22.1&quot;,
  &quot;react-native&quot;: &quot;^0.64.3&quot;,</p>
  </blockquote>
  <p>I'd like to refresh my page once I delete my comment.
  Mostly in this case, I've used <code>navigation.goBack()</code> or <code>navigation.navigate(&quot;same page&quot;)</code> like below.</p>
  <pre><code>  const onDeleteClick = () =&gt; {
      deleteCommentMutation();
      navigation.navigate(&quot;Comments&quot;);
    };
  </code></pre>
  <p>But the problem is Comments page has Flatlist with data getting from the previous page.
  On this page, I can't pass same data set ({route}) to Comments page.</p>
  <p>So It refreshes my page but with no data, which means empty page.
  I don't want that. I just refresh my page as deleting only one comment.</p>
  <p>When I searched on Internet, people recommend <code>window.location.reload()</code>
  But when I use it instead of navigation, it gives me error saying that:</p>
  <pre><code>TypeError: undefined is not an object (evaluating 'window.location.reload')
  
  at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
  at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
  at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
  at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
  </code></pre>
  <p>Can't React native use window.location.reload()?
  As far as I know, It doesn't need any installation or import.</p>
  <p>How can I use window.location.reload()?
  Otherwise, which way can I refresh my page?</p>
  <hr />
  <p>Srimurugan Sri taught me that React can't use window ;) thanks.
  So as he recommended I tried to use extraData.
  as far as I understand, it watch any change on {data} part.
  And if some change detected, automatically re-render flatlist.</p>
  <p>So I made <code>useState</code> and added <code>extraData</code> as below.</p>
  <pre><code> const [selectedId, setSelectedId] = useState(null);
    return (
      &lt;Container&gt;
        &lt;CommentBox&gt;
          &lt;FlatList
            keyboardDismissMode={true}
            showsVerticalScrollIndicator={false}
            data={route?.params?.comments}
            keyExtractor={(comment) =&gt; &quot;&quot; + comment.id}
            renderItem={renderComment}
            extraData={selectedId}
          /&gt;
        &lt;/CommentBox&gt;
      &lt;/Container&gt;
    );
  </code></pre>
  <p>But it still doesn't refresh my page.
  Can you teach me more?</p>
  <p><strong>CommentRow page</strong></p>
  <pre><code>export default function CommentRow({
    id,
    user,
    payload,
    isMine,
    createdAt,
    updatedAt,
    commentNumber,
    photoId,
  }) {
    const createdDate = new Date(+createdAt);
    const date = createdDate.toISOString().substring(0, 10);
    const updateDeleteComment = (cache, result) =&gt; {
      const {
        data: {
          deleteComment: { ok, error },
        },
      } = result;
      if (ok) {
        cache.evict({ id: `Comment:${id}` });
        cache.modify({
          id: `Photo:${photoId}`,
          fields: {
            commentNumber(prev) {
              return prev - 1;
            },
          },
        });
      }
    };
  
    const [deleteCommentMutation] = useMutation(DELETE_COMMENT_MUTATION, {
      variables: {
        id,
      },
      update: updateDeleteComment,
    });
    const onDeleteClick = () =&gt; {
      deleteCommentMutation();
    };
    return (
      &lt;Container&gt;
        &lt;CommentContainer&gt;
          &lt;UserImage source={{ uri: user.avatar }} /&gt;
          &lt;TextBox&gt;
            &lt;Header&gt;
              &lt;Username&gt;{user.username}&lt;/Username&gt;
              &lt;CreatedTime&gt;{date}&lt;/CreatedTime&gt;
            &lt;/Header&gt;
            &lt;CommentText&gt;{payload}&lt;/CommentText&gt;
          &lt;/TextBox&gt;
        &lt;/CommentContainer&gt;
        {isMine ? (
          &lt;WriteContainer&gt;
            &lt;TouchableOpacity&gt;
              &lt;WriteComment&gt;수정&lt;/WriteComment&gt;
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity onPress={onDeleteClick}&gt;
              &lt;WriteComment&gt;삭제&lt;/WriteComment&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/WriteContainer&gt;
        ) : null}
      &lt;/Container&gt;
    );
  }
  </code></pre>