verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix the multiple re-renders

This commit is contained in:
Reinaldo Neto 2022-08-01 18:11:32 -03:00
parent dcf1bc8a51
commit d00dd897cf
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/index.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Dimensions, Linking } from 'react-native'; import { Dimensions, Linking, unstable_batchedUpdates } from 'react-native';
import { AppearanceProvider } from 'react-native-appearance'; import { AppearanceProvider } from 'react-native-appearance';
import { KeyCommandsEmitter } from 'react-native-keycommands'; import { KeyCommandsEmitter } from 'react-native-keycommands';
import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context'; import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context';
@ -72,8 +72,9 @@ const parseDeepLinking = (url: string) => {
return null; return null;
}; };
const { width: widthWindow, height: heightWindow, scale: scaleWindow, fontScale: fontScaleWindow } = Dimensions.get('window');
const Root = () => { const Root = () => {
const { width: widthWindow, height: heightWindow, scale: scaleWindow, fontScale: fontScaleWindow } = Dimensions.get('window');
const [theme, setTheme] = useState(getTheme(initialTheme())); const [theme, setTheme] = useState(getTheme(initialTheme()));
const [themePreferences, setThemePreferences] = useState(initialTheme()); const [themePreferences, setThemePreferences] = useState(initialTheme());
const [width, setWidth] = useState(widthWindow); const [width, setWidth] = useState(widthWindow);
@ -94,9 +95,7 @@ const Root = () => {
initTablet(); initTablet();
} }
setNativeTheme(theme); setNativeTheme(theme);
}, []);
useEffect(() => {
listenerTimeout.current = setTimeout(() => { listenerTimeout.current = setTimeout(() => {
Linking.addEventListener('url', ({ url }) => { Linking.addEventListener('url', ({ url }) => {
const parsedDeepLinkingURL = parseDeepLinking(url); const parsedDeepLinkingURL = parseDeepLinking(url);
@ -105,7 +104,10 @@ const Root = () => {
} }
}); });
}, 5000); }, 5000);
Dimensions.addEventListener('change', onDimensionsChange); Dimensions.addEventListener('change', val => {
onDimensionsChange(val);
console.log('🚀 ~ file: index.tsx ~ line 109 ~ Dimensions.addEventListener ~ val', val);
});
return () => { return () => {
clearTimeout(listenerTimeout.current); clearTimeout(listenerTimeout.current);
@ -113,8 +115,8 @@ const Root = () => {
unsubscribeTheme(); unsubscribeTheme();
if (onKeyCommands.current && onKeyCommands.current.remove) { if (onKeyCommands?.current?.remove) {
onKeyCommands.current.remove(); onKeyCommands.current.remove?.();
} }
}; };
}, []); }, []);
@ -155,6 +157,12 @@ const Root = () => {
// Dimensions update fires twice // Dimensions update fires twice
const onDimensionsChange = debounce(({ window: { width, height, scale, fontScale } }: { window: IDimensions }) => { const onDimensionsChange = debounce(({ window: { width, height, scale, fontScale } }: { window: IDimensions }) => {
console.log('🚀 ~ file: index.tsx ~ line 160 ~ onDimensionsChange ~ { width, height, scale, fontScale }', {
width,
height,
scale,
fontScale
});
setDimensions({ setDimensions({
width, width,
height, height,
@ -175,10 +183,16 @@ const Root = () => {
}; };
const setDimensions = ({ width, height, scale, fontScale }: IDimensions) => { const setDimensions = ({ width, height, scale, fontScale }: IDimensions) => {
setWidth(width); // Test when migrate to React 18 https://reactjs.org/blog/2022/03/29/react-v18.html#new-feature-automatic-batching
setHeight(height); // We need this batchedUpdates because we are calling this from a debounce and
setScale(scale); // the React isn't able to batch multiples setState after asynchronous function
setFontScale(fontScale); // https://stackoverflow.com/a/48610973
unstable_batchedUpdates(() => {
setWidth(width);
setHeight(height);
setScale(scale);
setFontScale(fontScale);
});
}; };
const initTablet = () => { const initTablet = () => {
@ -197,6 +211,8 @@ const Root = () => {
}); });
}; };
console.count('🤯 App/index');
return ( return (
<SafeAreaProvider initialMetrics={initialWindowMetrics} style={{ backgroundColor: themes[theme].backgroundColor }}> <SafeAreaProvider initialMetrics={initialWindowMetrics} style={{ backgroundColor: themes[theme].backgroundColor }}>
<AppearanceProvider> <AppearanceProvider>