Skip to content

chore: Enable Fabric #6478

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 255 commits into
base: develop
Choose a base branch
from
Draft

chore: Enable Fabric #6478

wants to merge 255 commits into from

Conversation

diegolmello
Copy link
Member

@diegolmello diegolmello commented Jul 3, 2025

Proposed changes

Now Fabric is enabled, pay attention to batch updates https://react.dev/learn/queueing-a-series-of-state-updates

Issue(s)

Depends on #6380
Depends on RocketChat/react-native-simple-crypto#8

How to test or reproduce

Screenshots

Types of changes

  • Bugfix (non-breaking change which fixes an issue)
  • Improvement (non-breaking change which improves a current function)
  • New feature (non-breaking change which adds functionality)
  • Documentation update (if none of the other choices apply)

Checklist

  • I have read the CONTRIBUTING doc
  • I have signed the CLA
  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works (if applicable)
  • I have added necessary documentation (if applicable)
  • Any dependent changes have been merged and published in downstream modules

Further comments

@diegolmello diegolmello force-pushed the chore.enable-fabric3 branch from ba18393 to 2c78fa0 Compare July 15, 2025 20:25
@diegolmello
Copy link
Member Author

Apparently class components and function components behave differently in Fabric.
It took me quite some time to understand what was happening and that seems to be the reason.

Created this repro:

The idea is to replace RoomsListView with it and inspect logs.
The function component one is not going to log unmounted after Go to profile is pressed.
The class component one is going to log unmount.

import { Component, useEffect } from 'react';
import { View, Button, Text } from 'react-native';

const Dummy = ({ navigation }) => (
	<View>
		<Text>RoomsListView</Text>
		<Button onPress={() => navigation.jumpTo('ProfileStackNavigator')} title='Go to profile' />
	</View>
);

function RoomsListView({ navigation }) {
	useEffect(() => {
		console.log('RoomsListView mounted');
		return () => {
			console.log('RoomsListView unmounted');
		};
	}, []);

	return <Dummy navigation={navigation} />;
}

// class RoomsListView extends Component {
// 	componentWillUnmount(): void {
// 		console.log('RoomsListView unmounted');
// 	}
// 	render() {
// 		const { navigation } = this.props;
// 		return <Dummy navigation={navigation} />;
// 	}
// }

export default RoomsListView;

I think it's time to migrate everything to function components before migrating to Fabric 👀

@Rohit3523
Copy link
Collaborator

I think it's time to migrate everything to function components before migrating to Fabric 👀

You are just stuck in a update loop 🤣🤣

Apparently class components and function components behave differently in Fabric.

Do react native team still focus on the class components?? When I started my journey I found some articles to use the functional component instead of class 🤔

@diegolmello
Copy link
Member Author

@Rohit3523

You are just stuck in a update loop 🤣🤣

Well, it's part of the job 😅

Do react native team still focus on the class components?? When I started my journey I found some articles to use the functional component instead of class 🤔

We started the app before React Hooks even existed.
We always focus on making a better product and there was no real benefits in migrating (it could actually create new bugs).
That's why we still have quite a few class components.
Now we have a good reason.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy