software-mansion / react-native-screens

Native navigation primitives for your React Native app.
MIT License
2.9k stars 498 forks source link

enableFreeze can not prevent re-render caused by useIsFocused hook #2005

Closed sunhx-shx closed 3 weeks ago

sunhx-shx commented 5 months ago

Description

there have two screen in my application, I press one item navigate to detail screen, when I get into detail screen, the last search screen re-rendered, I used the useIsFocused hook in search.jsx, the react navigation doc show that using useIsFocused hook triggers a re-render for the screen when it changes focus, Is this the reason? This can show the enableFreeze can not freeze screen which called useIsFocused?

one two

Steps to reproduce

  1. set enableFreeze(true) in app.js 2.Navigate to search screen. 3.tap item to detail screen 4.when get into detail screen, search screen re-render

Snack or a link to a repository

https://snack.expo.dev/hz-a9zzR7

Screens version

~3.20.0

React Native version

0.71.14

Platforms

iOS

JavaScript runtime

JSC

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14 pro max

Acknowledgements

Yes

tboba commented 5 months ago

Hi @sunhx-shx, thank you for creating this issue! Do you know if this issue still exists on the newest version of react-native-screens? Have you tried to install 3.29.0 version and create a custom development bundle (with npx expo prebuild)?

Also, could you create a repro with similar hierarchy of screens that you have (currently I cannot reproduce this issue, nothing re-renders for me 😕)

sunhx-shx commented 5 months ago

Hi @sunhx-shx, thank you for creating this issue! Do you know if this issue still exists on the newest version of react-native-screens? Have you tried to install 3.29.0 version and create a custom development bundle (with npx expo prebuild)?

Also, could you create a repro with similar hierarchy of screens that you have (currently I cannot reproduce this issue, nothing re-renders for me 😕)

@tboba hi thanks for the reply! Sorry, I made a error in the description of second image above , it should be when i get into detail screen, the previous Search screen re-rendered.

I’ve tried on the newest version of react-native-screens, but the issue still exists. I've reproduced the issue here: https://github.com/sunhx-shx/furniture_mall Thanks♪(・ω・)ノ

sunhx-shx commented 5 months ago

@tboba Can you reproduce the issue?

kkafar commented 3 weeks ago

Hey, that behaviour is known and I believe this behaviour to be expected. Navigating to new destination causes reaction to 'blur' event on the side of navigating-from screen, thus most likely causing a re-render. Moreover, enableFreeze just uses react suspense mechanism underneath so I guess this is how the interaction looks like.

I'll close the issue as we do not plan to work on this, however I'm leaving the discussion open. Don't hesitate to ping me if any new facts emerge.