React Native Tutorial

Getting Started with React Native JavaScript & JSX Essentials Core Components & Styling Props & State Hooks (useState & useEffect) Lists with FlatList Navigation (React Navigation) Networking with fetch / axios State Management (Context & Redux) Local Storage with AsyncStorage Native Modules & Permissions Building & Publishing (EAS / Stores)

Hooks (useState & useEffect)

June 02, 2026 • 1 min read

Hooks add features to function components. The two essentials are useState (state) and useEffect (side effects like fetching).

useEffect

import { useState, useEffect } from 'react';
function Profile({ id }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch(`https://api.example.com/users/${id}`)
      .then(r => r.json())
      .then(setUser);
  }, [id]);   // re-runs when id changes
  return <Text>{user ? user.name : 'Loading…'}</Text>;
}
  • The dependency array [id] controls when the effect re-runs.
  • An empty array [] runs it once on mount.
  • Return a cleanup function to cancel subscriptions/timers.
Common mistake: Missing dependencies in the array cause stale data; the ESLint rules-of-hooks plugin catches these.

Summary

useState holds data; useEffect runs side effects with a dependency array controlling when. Together they power data loading.