React Native Hooks Cheat Sheet: useState, useEffect, useRef & Custom Hooks

React Native uses the same React hooks as the web, plus mobile helpers like useWindowDimensions. useState holds UI state, useEffect runs after paint (subscriptions, fetch), and useRef holds timers or native refs without re-rendering. Custom hooks share that logic across screens.

This React Native cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• useState: Local state. Functional updates: setN((n) => n + 1).
• useEffect: Sync with the world. Return a cleanup for listeners and AbortController.
• Deps: List every value you read. Empty [] means mount/unmount only.
• useRef: Mutable box. .current for TextInput focus or interval ids.
• useMemo / useCallback: Skip work or keep function identity for children. Measure before wrapping everything.
• useWindowDimensions: Width/height that updates on rotate. Prefer over a one-time Dimensions.get.
• useFocusEffect: From React Navigation — refetch when the screen is focused.
• Custom: useAuth, useDebouncedValue — name with use, call only at top level.

Copy-paste examples

Fetch on mount with abort and dimensions

Cleanup aborts fetch when the screen unmounts. Do not ignore the error path.

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

export function Headline() {
  const { width } = useWindowDimensions();
  const [title, setTitle] = useState('…');
  useEffect(() => {
    const ctrl = new AbortController();
    fetch('https://example.com/api/headline', { signal: ctrl.signal })
      .then((r) => r.json())
      .then((d) => setTitle(d.title))
      .catch((err) => {
        if (err.name !== 'AbortError') setTitle('Unavailable');
      });
    return () => ctrl.abort();
  }, []);
  return <Text>{title} · {Math.round(width)}px</Text>;
}

Common mistakes

• Fetching in render (infinite loop) instead of useEffect.
• Missing cleanup and stacking intervals every focus.
• Copying web useLayoutEffect for DOM measurements that do not exist.
• Storing derived values in state that should be computed during render.

FAQ

1. Are hooks different on native? The rules are the same. The extra ones wrap device APIs (keyboard, appearance, dimensions).

1. useEffect vs navigation focus? Mount effects run when the component mounts, which may stay mounted in a tab. Use useFocusEffect to refresh when the user comes back.

1. Can I use hooks in class components? No. Convert to functions or use a wrapper component.

Related React Native cheat sheets

• React Native Cheat Sheet 2026
• React Native Components Cheat Sheet
• React Native Navigation Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds mobile app development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.