From 74e187a2a5d49758f448bcd1e4adafc91e6a3dbe Mon Sep 17 00:00:00 2001 From: Omid Ebrahimi Date: Thu, 11 Jan 2024 23:20:03 +0100 Subject: [PATCH 1/5] fixes the re-render warning for using useIsFocused It re-renders the direct component that contains this hook, but it was mentioned that it re-renders the screen. --- versioned_docs/version-7.x/use-is-focused.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-7.x/use-is-focused.md b/versioned_docs/version-7.x/use-is-focused.md index aeeaf0e233b..f578ff03a0e 100755 --- a/versioned_docs/version-7.x/use-is-focused.md +++ b/versioned_docs/version-7.x/use-is-focused.md @@ -20,7 +20,7 @@ function Profile() { } ``` -Note that using this hook triggers a re-render for the screen when it changes focus. This might cause lags during the animation if your screen is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. +Note that using the `useIsFocused` in a component triggers a re-render on that component when the focus is changed for the screen that contains the component. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. ## Using with class component From 15da608330924c9b3242ae88a0442d96e8388396 Mon Sep 17 00:00:00 2001 From: Omid Ebrahimi Date: Thu, 11 Jan 2024 23:33:29 +0100 Subject: [PATCH 2/5] updates use-is-focused.md for v7.x --- versioned_docs/version-7.x/use-is-focused.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-7.x/use-is-focused.md b/versioned_docs/version-7.x/use-is-focused.md index f578ff03a0e..fc35a7201b0 100755 --- a/versioned_docs/version-7.x/use-is-focused.md +++ b/versioned_docs/version-7.x/use-is-focused.md @@ -20,7 +20,7 @@ function Profile() { } ``` -Note that using the `useIsFocused` in a component triggers a re-render on that component when the focus is changed for the screen that contains the component. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. +Note that using this hook in a component triggers a re-render on that component when the focus is changed for the screen that contains the component. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. ## Using with class component From 7d2a52fa769c3e2c5c50fa2fdde05530500cdb84 Mon Sep 17 00:00:00 2001 From: Omid Ebrahimi Date: Thu, 11 Jan 2024 23:34:40 +0100 Subject: [PATCH 3/5] updates use-is-focused.md for v6.x --- versioned_docs/version-6.x/use-is-focused.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-6.x/use-is-focused.md b/versioned_docs/version-6.x/use-is-focused.md index aeeaf0e233b..fc35a7201b0 100755 --- a/versioned_docs/version-6.x/use-is-focused.md +++ b/versioned_docs/version-6.x/use-is-focused.md @@ -20,7 +20,7 @@ function Profile() { } ``` -Note that using this hook triggers a re-render for the screen when it changes focus. This might cause lags during the animation if your screen is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. +Note that using this hook in a component triggers a re-render on that component when the focus is changed for the screen that contains the component. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. ## Using with class component From 75bb6ece3ab6bc1cf77e7aae895d5d2ef0073dcc Mon Sep 17 00:00:00 2001 From: Omid Ebrahimi Date: Fri, 12 Jan 2024 16:46:58 +0100 Subject: [PATCH 4/5] Update versioned_docs/version-6.x/use-is-focused.md Co-authored-by: Satyajit Sahoo --- versioned_docs/version-6.x/use-is-focused.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-6.x/use-is-focused.md b/versioned_docs/version-6.x/use-is-focused.md index fc35a7201b0..69ab01fdc82 100755 --- a/versioned_docs/version-6.x/use-is-focused.md +++ b/versioned_docs/version-6.x/use-is-focused.md @@ -20,7 +20,7 @@ function Profile() { } ``` -Note that using this hook in a component triggers a re-render on that component when the focus is changed for the screen that contains the component. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. +Note that using this hook triggers a re-render for the component when the screen it's in changes focus. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. ## Using with class component From 739dbf6491d5bc25d53ae888c944bd7c2a9df3ba Mon Sep 17 00:00:00 2001 From: Omid Ebrahimi Date: Fri, 12 Jan 2024 16:49:58 +0100 Subject: [PATCH 5/5] Update use-is-focused.md for v7.x --- versioned_docs/version-7.x/use-is-focused.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-7.x/use-is-focused.md b/versioned_docs/version-7.x/use-is-focused.md index fc35a7201b0..69ab01fdc82 100755 --- a/versioned_docs/version-7.x/use-is-focused.md +++ b/versioned_docs/version-7.x/use-is-focused.md @@ -20,7 +20,7 @@ function Profile() { } ``` -Note that using this hook in a component triggers a re-render on that component when the focus is changed for the screen that contains the component. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. +Note that using this hook triggers a re-render for the component when the screen it's in changes focus. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. ## Using with class component