Summary - Hooks
- React Native course
- Intermediate
- Lesson 6/116
- 5 min
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.
Practice 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>.
Starter code
// Import useEffect and useState
function Stopwatch() {
const [seconds, setSeconds] = useState(0);
// Start setInterval inside useEffect; return cleanup; array empty
return <Text>Time: {seconds}</Text>;
}Sample 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>;
}Practice 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>.
Starter code
// Import useEffect, useRef and useState
function Stopwatch() {
const [seconds, setSeconds] = useState(0);
// Create idRef (initial null)
// Inside useEffect assign setInterval to idRef.current; return cleanup
return <Text>Time</Text>;
}Sample 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>;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does cleanup do here?
useEffect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}, []);- Stops the timer Correct answer
- Yeni efekt ekler
- Nothing
- Creates state
Explanation: Cleanup stops setInterval with clearInterval.
2 Match the hook to its role
| Term | Meaning |
|---|---|
useEffect |
Side effect |
useRef |
Mutable reference |
useMemo |
Computation cache |
cleanup |
Releases resource |
3 Import the hook
import { ____ } from "react";import { useMemo } from "react";Explanation: The useMemo hook is imported.