chore: react-compiler (#6679)

Co-authored-by: Rohit3523 <[email protected]>
Co-authored-by: Diego Mello <[email protected]>

Author: Rohit3523

.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
 		}
 	},
 	parser: '@babel/eslint-parser',
-	extends: ['plugin:jest/recommended', '@rocket.chat/eslint-config', 'prettier'],
+	extends: ['plugin:jest/recommended', '@rocket.chat/eslint-config', 'prettier', 'plugin:react-hooks/recommended'],
 	parserOptions: {
 		sourceType: 'module',
 		ecmaVersion: 2017,
@@ -36,6 +36,9 @@ module.exports = {
 		'jest/globals': true
 	},
 	rules: {
+		'react-hooks/set-state-in-effect': 1,
+		'react-hooks/immutability': 1,
+		'react-hooks/refs': 1,
 		'import/named': 'error',
 		'import/no-unresolved': 'error',
 		'import/extensions': [

app/containers/ActionSheet/BottomSheetContent.tsx

@@ -20,6 +20,8 @@ interface IBottomSheetContentProps {
 }
 
 const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onLayout }: IBottomSheetContentProps) => {
+	'use memo';
+
 	const { colors } = useTheme();
 	const { bottom } = useSafeAreaInsets();
 	const { fontScale } = useWindowDimensions();

app/containers/ActionSheet/Handle.tsx

@@ -6,6 +6,8 @@ import { themes } from '../../lib/constants/colors';
 import { useTheme } from '../../theme';
 
 export const Handle = React.memo(() => {
+	'use memo';
+
 	const { theme } = useTheme();
 	return (
 		<View style={styles.handle} testID='action-sheet-handle'>

app/containers/ActionSheet/Item.tsx

@@ -16,6 +16,8 @@ export interface IActionSheetItem {
 }
 
 export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
+	'use memo';
+
 	const enabled = item?.enabled ?? true;
 	const { colors } = useTheme();
 	const { fontScale } = useWindowDimensions();

app/containers/ActionSheet/Provider.tsx

@@ -54,6 +54,8 @@ export const withActionSheet = (Component: React.ComponentType<any>): typeof Com
 const actionSheetRef: React.Ref<IActionSheetProvider> = createRef();
 
 export const ActionSheetProvider = React.memo(({ children }: { children: React.ReactElement | React.ReactElement[] }) => {
+	'use memo';
+
 	const getContext = (): IActionSheetProvider => ({
 		showActionSheet: options => {
 			actionSheetRef.current?.showActionSheet(options);

app/containers/Header/components/HeaderBackButton.tsx

@@ -20,6 +20,8 @@ const styles = StyleSheet.create({
 });
 
 export const HeaderBackButton = ({ ...props }: HeaderBackButtonProps) => {
+	'use memo';
+
 	const { colors } = useTheme();
 	return (
 		<RNHeaderBackButton

app/containers/Header/components/HeaderButton/HeaderButtonItem.tsx

@@ -53,6 +53,8 @@ const Item = memo(
 		accessibilityLabel,
 		...props
 	}: IHeaderButtonItem): React.ReactElement => {
+		'use memo';
+
 		const { colors } = useTheme();
 		return (
 			<BorderlessButton

app/containers/Header/components/HeaderContainer/index.tsx

@@ -13,6 +13,8 @@ interface IHeaderContainer extends ViewProps {
 
 const HeaderContainer = memo(
 	({ addExtraNotchPadding = false, isMasterDetail = false, customRightIcon, customLeftIcon, children }: IHeaderContainer) => {
+		'use memo';
+
 		const insets = useSafeAreaInsets();
 		const { colors } = useTheme();
 		const { height, width } = useWindowDimensions();

app/containers/Header/components/HeaderTitle/index.tsx

@@ -10,6 +10,8 @@ interface IHeaderTitle {
 }
 
 const HeaderTitle = memo(({ headerTitle }: IHeaderTitle) => {
+	'use memo';
+
 	const { colors } = useTheme();
 	if (!headerTitle) {
 		return null;

app/containers/Header/index.tsx

@@ -12,6 +12,8 @@ import { HeaderBackButton } from './components/HeaderBackButton';
 interface IHeader extends NativeStackHeaderProps {}
 
 const Header = ({ options, navigation, route }: IHeader) => {
+	'use memo';
+
 	const { headerLeft, headerTitle, headerRight, title } = options;
 	const [rightButtonsWidth, setRightButtonsWidth] = useState<number | null>(null);
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);