React Native'de State Yönetimi Nasıl Yapılır?

Bu teknik yazı ilk olarak 2023-08-06 tarihinde yayımlandı. Kod örnekleri o tarihteki sürümlere göre yazılmıştır; güncel sürümlerde test edilmeden kullanmayın.

React Native’de State Yönetimi Nasıl Yapılır?

React Native’de state yönetimi, uygulamanızın durumunu takip etmek ve bu durumu bileşenler arasında iletmek için kullanılan bir temel kavramdır. React Native, React’in state yönetimini temel alır ve React Hooks ile daha da gelişmiş state yönetimi imkanları sunar. İşte React Native’de state yönetimini nasıl yapacağınıza dair temel adımlar:

1. State Kavramı ve Tanımlama: State, uygulamanızın durumunu ve verilerini tutmak için kullanılan bir JavaScript nesnesidir. State, uygulamanızın belirli bir zamandaki durumunu temsil eder ve değiştirilebilir (mutable) yapısı sayesinde uygulamanızdaki dinamik değişikliklere izin verir.

State’i tanımlamak için React Native’de sınıf tabanlı bileşenler kullanabilir veya daha yeni React Hooks API’si ile fonksiyon tabanlı bileşenlerde state kullanabilirsiniz.

2. Sınıf Tabanlı Bileşenlerde State Yönetimi:

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

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <View>
        <Text>Count: {this.state.count}</Text>
        <Button title="Increment" onPress={this.incrementCount} />
      </View>
    );
  }
}

export default Counter;

Yukarıdaki örnek, sınıf tabanlı bir bileşen olan Counter’ı gösterir. Bileşenin state’inde count adında bir değişken tutulur ve incrementCount metodu ile state güncellenir.

3. Fonksiyon Tabanlı Bileşenlerde State Yönetimi (Hooks):

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={incrementCount} />
    </View>
  );
};

export default Counter;

Fonksiyon tabanlı bileşenlerde, useState hook’u ile state tanımlayabilir ve setCount metodu ile state’i güncelleyebilirsiniz. Hooks, state yönetimini daha basit ve sade bir şekilde yapmanızı sağlar.

4. State’i Bileşenler Arasında İletme (Props Kullanımı): Eğer state’i bir bileşenden diğerine iletmek istiyorsanız, Props kullanabilirsiniz. State’i tanımlayıp, diğer bileşenlere props olarak geçirerek state’i paylaşabilirsiniz.

Örnek:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <View>
      <ChildComponent count={count} incrementCount={incrementCount} />
    </View>
  );
};

const ChildComponent = ({ count, incrementCount }) => {
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={incrementCount} />
    </View>
  );
};

export default ParentComponent;

Yukarıdaki örnekte, ParentComponent içindeki count state’i ChildComponent’e count prop’u olarak geçirilmiştir. Böylece, ChildComponent da state’i kullanabilir ve incrementCount metodunu çağırabilir.

Sonuç olarak, React Native’de state yönetimi, state’in tanımlanması, güncellenmesi ve diğer bileşenlere iletilmesi üzerine odaklanır. Sınıf tabanlı bileşenler ve fonksiyon tabanlı bileşenlerde state yönetimi için farklı yöntemler vardır ve Hooks API’siyle daha basit bir yapıda kullanım sunulur. State yönetimi, uygulamanızın durumunu düzenli ve etkili bir şekilde kontrol etmenizi sağlar ve veri akışınızı sağlıklı bir şekilde yönetmenize yardımcı olur.