useEffect

Bir component mount edilebilir, bir component üzerindeki state değişebilir veya component unmount edilebilir bunlar yaşam döngüsü olarak değerlendirilir doğum yaşam ölüm olarak düşünülebilir. Bir componentin yaşam döngüsü bizim için neden önemli ? Çünkü component ilk kez mount edildiği anda bununla alakalı bir işlem yapmak isteyebiliriz. Örneğin; component mount edilir edilmez bir veri kaynağına gidip veri çekmek isteyebiliriz. Veya bir component üzerindeki bir state değiştiği anda bu değişimle alakalı farklı bir fonksiyon tetiklemek isteyebiliriz. Component unmount edildiğinde benzer şekilde bir takım işlemler yapmak isteyebiliriz.

import { View, Text, StyleSheet, Button } from "react-native";
import React, { useState, useEffect } from "react";

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

  //   useEffect(() => {
  //     console.log("Bir state değişti.");
  //   });

  // [] verdiğimiz bu ikinci parametre ile component sadece mount edildiği anda bilgi alırız.
  // [] bağımlılık array inin içi boşsa bu demektir ki component sadece mount edildiği zaman üzerindeki fonksiyon tetiklensin.

  useEffect(() => {
    console.log("Component mount edildi.");
  }, []);

  //spesifik bir state değiştiği zaman ikinci parametredeki bu array in içerisine
  // değiştiğinde haberdar olmak istediğiniz state in değerini yazabiliriz

  useEffect(() => {
    console.log("count state değişti.");
  }, [count]);

  useEffect(() => {
    console.log("amount state değişti.");
  }, [amount]);


//   useEffect(() => {
//     console.log("count veya amount state değişti.");
//   }, [count, amount]);


  return (
    <View style={styles.container}>
      <Text style={styles.text}>Count: {count}</Text>
      <Button title="Arttır" onPress={() => setCount(count + amount)} />

      <Text style={styles.text}>Amount: {amount}</Text>
      <Button title="1" onPress={() => setAmount(1)} />
      <Button title="5" onPress={() => setAmount(5)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontSize: 36,
  },
});

export default Counter;

import React, { useState } from "react";
import {
  StyleSheet,
  SafeAreaView,
  Text,
  FlatList,
  View,
  Button,
} from "react-native";
import Counter from "./src/components/Counter";

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Counter />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default App;

---

import { View, Text, StyleSheet, Button } from "react-native";
import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  useEffect(() => {
    console.log("count veya amount state değişti.");
  }, [count, amount]);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Count: {count}</Text>
      <Button title="Arttır" onPress={() => setCount(count + amount)} />

      <Text style={styles.text}>Amount: {amount}</Text>
      <Button title="1" onPress={() => setAmount(1)} />
      <Button title="5" onPress={() => setAmount(5)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontSize: 36,
  },
});

export default Counter;

import React, { useState } from "react";
import {
  StyleSheet,
  SafeAreaView,
  Text,
  FlatList,
  View,
  Button,
} from "react-native";
import Counter from "./src/components/Counter";

const App = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <SafeAreaView style={styles.container}>
      {isVisible && <Counter />}

      <Button title="Göster/Gizle" onPress={() => setIsVisible(!isVisible)} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default App;