Render döngüsü tuzakları: Çapraz platform uygulamalarda performans kaybı

# Render Döngüsü Tuzakları: Çapraz Platform Uygulamalarda Performans Kaybı

Flutter ve React Native'de performans sorununun çoğu render döngüsünden kaynaklanır. Bir widget veya bileşen gerekenden daha sık yeniden çizilirse, CPU ve bellek tüketimi hızla artar. Uygulamanın akıcılığı düşer, pil tükenir.

Flutter'da State değiştiğinde parent widget yeniden inşa edilir. Eğer parent'ın tüm child'ları rebuild olursa, görünmeyen widget'lar da işlem görür. React Native'de ise prop değişirse component yeniden render olur. Shallow comparison yapılmadığında, referans değişse bile render tetiklenir.

Flutter'da debugPrintRebuildDirtyWidgets = true; özelliğini kullanarak hangi widget'ların rebuild olduğunu görebilirsin. React Native'de React DevTools Profiler'ı açıp render sürelerini kontrol et.

Gereksiz rebuild'i önlemek için state'i daha küçük parçalara ayır. Örneğin, form verisi ve scroll pozisyonunu ayrı provider'larda tut.

Flutter örneği:

1class CounterProvider extends ChangeNotifier {
2int _counter = 0;
3int get counter => _counter;
4
5void increment() {
6_counter++;
7notifyListeners();
8}
9}
10
11class MyWidget extends StatelessWidget {
12@override
13Widget build(BuildContext context) {
14return Consumer<CounterProvider>(
15builder: (context, provider, child) {
16return Text('${provider.counter}');
17},
18);
19}
20}

Çıktı: Text widget'ı sadece counter değiştiğinde rebuild olur; diğer state değişimleri etkilemez.

Flutter'da const widget'lar rebuild sırasında yeniden oluşturulmaz:

1class StaticHeader extends StatelessWidget {
2const StaticHeader(); // const constructor
3
4@override
5Widget build(BuildContext context) {
6return Container(
7padding: EdgeInsets.all(16),
8child: Text('Başlık'),
9);
10}
11}

Parent rebuild olsa bile StaticHeader sadece bir kez çizilir.

1const UserList = ({ users }) => {
2const memoizedList = useMemo(() => {
3return users.map(u => <UserItem key={u.id} user={u} />);
4}, [users]);
5
6return <FlatList data={memoizedList} renderItem={({ item }) => item} />;
7};

useMemo, users değişmediği sürece listeyi yeniden hesaplamaz.

Animasyon sırasında setState kullanmak tüm widget'ı rebuild eder. Bunun yerine AnimationController'ı kullan:

1class AnimatedBox extends StatefulWidget {
2@override
3State<AnimatedBox> createState() => _AnimatedBoxState();
4}
5
6class _AnimatedBoxState extends State<AnimatedBox> with SingleTickerProviderStateMixin {
7late AnimationController _controller;
8
9@override
10void initState() {
11_controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
12_controller.forward();
13}
14
15@override
16Widget build(BuildContext context) {
17return AnimatedBuilder(
18animation: _controller,
19builder: (context, child) {
20return Transform.scale(scale: _controller.value, child: child);
21},
22child: Container(width: 100, height: 100, color: Colors.blue),
23);
24}
25}

Çıktı: Kutu 1 saniyede büyür; parent widget rebuild olmaz.

Render tuzaklarından kurtulmak için state'i bölümlendirle, const widget'lar kullan, memoization uygula ve animasyonları ayrı yönet. Profiler araçlarını düzenli kontrol et.