Summary - Hooks

Combine useEffect, useRef and useMemo to write a timer.

Summary - Hooks

In this group you learned four core hooks. useEffect runs side effects on mount and update; the dependency array sets when it re-runs. With cleanup you release resources, with useRef you keep a mutable reference without a re-render.

useMemo caches an expensive computation. Now you will combine them in a timer component: useEffect sets up the timer, useRef holds its id, cleanup stops it. This is a pattern you will see often in real apps.

Exercise Set up a counter with useEffect

Write a Stopwatch component. Hold a seconds state with useState. Inside useEffect start a setInterval that increments seconds every second; the dependency array is [] (mount only). Call clearInterval in the cleanup. The component returns <Text>{`Time: ${seconds}`}</Text>.

Show example solution

import { useEffect, useState } from "react";
import { Text } from "react-native";

function Stopwatch() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <Text>Time: {seconds}</Text>;
}

Exercise Hold the timer id with useRef

Add useRef to the same Stopwatch component. Create idRef (initial value null). Assign the result of setInterval to idRef.current. Call clearInterval(idRef.current) in the cleanup. The component returns <Text>Time</Text>.

Show example solution

import { useEffect, useRef, useState } from "react";
import { Text } from "react-native";

function Stopwatch() {
  const [seconds, setSeconds] = useState(0);
  const idRef = useRef(null);
  useEffect(() => {
    idRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(idRef.current);
  }, []);
  return <Text>Time</Text>;
}

Test yourself

What does cleanup do here?
```
useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);
```
- Stops the timer
- Yeni efekt ekler
- Nothing
- Creates state
Show answer

Stops the timer — Cleanup stops setInterval with clearInterval.
Match the hook to its role

useEffect

Side effect
useRef

Mutable reference
useMemo

Computation cache
cleanup

Releases resource

Import the hook

import { ____ } from "react";

Show answer

import { useMemo } from "react";

Next lesson: Custom hook

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies