⚓ React Native Hooks – Introduction

? Quick Overview

React Native Hooks are special functions that allow you to use state and other React features inside functional components. They eliminate the need for class components and make code simpler, cleaner, and more reusable.

? Key Concepts

Hooks only work inside functional components
Hooks start with the keyword use
You cannot call hooks conditionally
Hooks help manage state, lifecycle, and side effects

? Syntax / Theory

Hooks are imported from the React library and used directly inside functional components. The most common hook is useState, used for managing component state.

? View Code Example

// Importing useState hook from react
import React, { useState } from "react";

? Code Example(s)

? View Code Example

// Simple React Native component using useState hook
import React, { useState } from "react";
import { View, Text, Button } from "react-native";

const CounterApp = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default CounterApp;

? Live Output / Explanation

? What Happens?

When the button is pressed, the state variable count increases by 1 and the UI automatically re-renders with the updated value.

? Interactive Example / Concept Flow

This interactive demo simulates how the React Native code above works. Notice how updating the "Internal State" automatically updates the "Phone UI".

? Live Simulator

INTERNAL MEMORY: useState(0)

Count: 0

Clicking Increase calls setCount, updates memory, and triggers a re-render.

? Use Cases

Handling button clicks
Managing form inputs
Toggling UI elements
Tracking counters or scores

? Tips & Best Practices

Always call hooks at the top level
Use descriptive state variable names
Prefer hooks over class components

? Try It Yourself

Create a toggle button using useState
Build a simple like/unlike feature
Create a counter with reset functionality