Mastering Hooks in React Native: A Deep Dive

React Native Hooks are functions that empower functional components to utilize state, lifecycle methods, and more. Introduced in React 16.8, they offer a concise way to handle logic in functional components.
To learn basics of React Native and Expo, refer to our <a href="https://www.blackslate.io/articles/tag/react-native" target="_blank" rel="noopener">react native</a> series post.
<h3>Benefits of Hooks</h3>
Reuse Logic:
Hooks enable the reuse of stateful logic without changing the component hierarchy.
Example:
<pre class="language-javascript"><code> const useCustomLogic = () =&gt; {
 const [value, setValue] = useState(0);

 const increment = () =&gt; {
 setValue(value + 1);
 };

 return [value, increment];
 };

 // Usage
 const [count, incrementCount] = useCustomLogic();</code></pre>
&nbsp;
Better Code Organization: Code that uses hooks tends to be more readable and modular.
No Need for Class Components: Hooks eliminate the need for class components for state management.
&nbsp;
<h3>Basic Rules of Hooks</h3>
1. Use in Functional Components: Hooks can only be used in functional components or custom hooks.
2. Top-Level Calls: Hooks should be called at the top level of the component.
3. Consistent Order: Hooks must be called in the same order in every render.
&nbsp;
useState Hook: Managing State in Functional Components
The <code>useState</code> hook allows functional components to have local state. It returns an array with two elements: the current state value and a function that lets you update it.
Practical Examples and Use Cases:
- Managing form input values.
<pre class="language-javascript"><code>const [inputValue, setInputValue] = useState('');</code></pre>
&nbsp;
- Toggling visibility or enabling/disabling features.
<pre class="language-javascript"><code> const [isVisible, setIsVisible] = useState(true);</code></pre>
&nbsp;
- Creating counters and dynamic content.
<pre class="language-javascript"><code> const [count, setCount] = useState(0);</code></pre>
&nbsp;
useEffect Hook: Side Effects in Functional Components
The <code>useEffect</code> hook is used for handling side effects in functional components. Side effects include data fetching, subscriptions, or manually changing the DOM.
Practical Examples and Use Cases:
- Fetching data from an API.
<pre class="language-javascript"><code> useEffect(() =&gt; {
 fetchData();
 }, []);</code></pre>
&nbsp;
- Subscribing to external events.
<pre class="language-javascript"><code> useEffect(() =&gt; {
 const subscription = subscribeToEvent();
 return () =&gt; subscription.unsubscribe();
 }, []);</code></pre>
&nbsp;
- Manually changing the DOM or performing cleanup.
<pre class="language-javascript"><code> useEffect(() =&gt; {
 document.title = 'New Page Title';
 return () =&gt; {
 // Cleanup logic here
 };
 }, []);</code></pre>
&nbsp;
useContext Hook: Simplifying State Management with Context
The <code>useContext</code> hook provides a simple way to access values stored in the context. Context allows you to pass data through the component tree without having to pass props manually.
Practical Examples and Use Cases:
- Managing global application state.
<pre class="language-javascript"><code> const theme = useContext(ThemeContext);</code></pre>
&nbsp;
- Handling user authentication across components.
<pre class="language-javascript"><code> const user = useContext(UserContext);</code></pre>
&nbsp;
useReducer Hook: Centralizing Complex State Logic
The <code>useReducer</code> hook is useful for managing complex state logic in functional components. It is often preferable to <code>useState</code> when the next state depends on the previous one.
Practical Examples and Use Cases:
- Managing state transitions in a finite state machine.
<pre class="language-javascript"><code> const [state, dispatch] = useReducer(reducer, initialState);</code></pre>
&nbsp;
- Handling complex form validations and state changes.
<pre class="language-javascript"><code> const [formState, dispatchFormAction] = useReducer(formReducer, initialFormState);</code></pre>
&nbsp;
useCallback and useMemo Hooks: Optimizing Performance with Memoization
The <code>useCallback</code> hook is used to memoize functions, while the <code>useMemo</code> hook is used to memoize values. Memoization optimizes performance by preventing unnecessary re-renders.
Practical Examples and Use Cases:
- Memoizing event handlers.
<pre class="language-javascript"><code> const handleClick = useCallback(() =&gt; {
 // Handle click logic
 }, [dependency]);</code></pre>
- Memoizing the result of a computation to avoid unnecessary recalculations.
<pre class="language-javascript"><code> const memoizedValue = useMemo(() =&gt; computeExpensiveValue(a, b), [a, b]);</code></pre>
&nbsp;
useRef Hook: Accessing and Interacting with DOM Elements
The <code>useRef</code> hook provides a way to access and interact with a DOM element directly. It is commonly used to persist values across renders without causing re-renders.
Practical Examples and Use Cases:
- Referencing and interacting with DOM elements directly.
<pre class="language-javascript"><code> const myRef = useRef();</code></pre>
- Storing mutable values that persist across renders without causing re-renders.
<pre class="language-javascript"><code>const mutableValue = useRef(initialValue);</code></pre>
Now, let&rsquo;s build a Demo NoteBook app to deeply understand what we&rsquo;ve learnt and use it to make something of practical usage.
&nbsp;
<h3>App Setup</h3>
Installation
Ensure you have Node.js and npm installed.
Run the following commands to set up a new React Native project using Expo:
<pre class="language-bash"><code>npm install -g expo-cli
expo init NotebookApp
cd NotebookApp</code></pre>
&nbsp;
Folder Structure
<pre class="language-bash"><code>/NotebookApp
|-- /src
| |-- /components
| |-- NoteContext.js
| |-- NoteReducer.js
| |-- NoteList.js
| |-- AddNoteForm.js
| |-- App.js
|-- /assets
| |-- /images
| |-- note.png
|-- /node_modules
|-- package.json
|-- App.js
|-- .gitignore
|-- README.md
|-- ... (other project files)</code></pre>
&nbsp;
NoteContext.js
<pre class="language-javascript"><code>import React, { createContext, useReducer, useContext } from 'react';
import noteReducer from './NoteReducer';

const NoteContext = createContext();

export const useNoteContext = () =&gt; {
 const context = useContext(NoteContext);
 if (!context) {
 throw new Error('useNoteContext must be used within a NoteProvider');
 }
 return context;
};

export const NoteProvider = ({ children }) =&gt; {
 const [notes, dispatch] = useReducer(noteReducer, []);

 const addNote = (note) =&gt; {
 dispatch({ type: 'ADD_NOTE', payload: note });
 };

 const removeNote = (noteId) =&gt; {
 dispatch({ type: 'REMOVE_NOTE', payload: noteId });
 };

 return (
 &lt;NoteContext.Provider value={{ notes, addNote, removeNote }}&gt;
 {children}
 &lt;/NoteContext.Provider&gt;
 );
};</code></pre>
This file is responsible for managing the context related to notes using the <code>useReducer</code> hook. It provides a <code>NoteProvider</code> component, which wraps the entire application, and a custom hook <code>useNoteContex</code> to access the state and actions related to notes.
Purpose:
&nbsp; - Create a context for managing notes.
&nbsp; - Provide a custom hook to access the context in functional components.
&nbsp; - Utilize the <code>useReducer</code> hook to manage state and actions.
&nbsp;
NoteReducer.js
<pre class="language-javascript"><code>const noteReducer = (state, action) =&gt; {
 switch (action.type) {
 case 'ADD_NOTE':
 return [...state, { id: Date.now(), text: action.payload }];
 case 'REMOVE_NOTE':
 return state.filter((note) =&gt; note.id !== action.payload);
 default:
 return state;
 }
};

export default noteReducer;</code></pre>
This file contains the reducer function used by <code>useReducer</code> in `NoteContext.js`. The reducer handles actions such as adding and removing notes, updating the state accordingly.
Purpose:
&nbsp; - Define the reducer function to manage state transitions based on actions.
&nbsp; - Handle actions like adding a new note and removing an existing note.
&nbsp;
NoteList.js
<pre class="language-javascript"><code>import React from 'react';
import { FlatList, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useNoteContext } from './NoteContext';

const NoteList = () =&gt; {
 const { notes, removeNote } = useNoteContext();

 const renderItem = ({ item }) =&gt; (
 &lt;View style={styles.noteItem}&gt;
 &lt;Text style={styles.noteText}&gt;{item.text}&lt;/Text&gt;
 &lt;TouchableOpacity onPress={() =&gt; removeNote(item.id)}&gt;
 &lt;Text style={styles.removeButton}&gt;Remove&lt;/Text&gt;
 &lt;/TouchableOpacity&gt;
 &lt;/View&gt;
 );

 return (
 &lt;FlatList
 data={notes}
 keyExtractor={(item) =&gt; item.id.toString()}
 renderItem={renderItem}
 /&gt;
 );
};

const styles = StyleSheet.create({
 noteItem: {
 flexDirection: 'row',
 justifyContent: 'space-between',
 alignItems: 'center',
 padding: 10,
 borderBottomWidth: 1,
 borderBottomColor: '#ccc',
 },
 noteText: {
 fontSize: 16,
 },
 removeButton: {
 color: 'red',
 fontSize: 16,
 },
});

export default NoteList;</code></pre>
This component renders a list of notes using the <code>FlatList</code> component. It subscribes to the note context using the <code>useNoteContext</code> hook and displays each note with an option to remove it.
Purpose:
&nbsp; - Display a list of notes fetched from the context.
&nbsp; - Provide a visual representation of each note with a remove option.
&nbsp;
<h3>AddNoteForm.js</h3>
<pre class="language-javascript"><code>import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';
import { useNoteContext } from './NoteContext';

const AddNoteForm = () =&gt; {
 const [noteText, setNoteText] = useState('');
 const { addNote } = useNoteContext();

 const handleAddNote = () =&gt; {
 if (noteText.trim() !== '') {
 addNote(noteText);
 setNoteText('');
 }
 };

 return (
 &lt;View style={styles.addNoteForm}&gt;
 &lt;TextInput
 style={styles.input}
 placeholder="Enter note text"
 value={noteText}
 onChangeText={setNoteText}
 /&gt;
 &lt;Button title="Add Note" onPress={handleAddNote} /&gt;
 &lt;/View&gt;
 );
};

const styles = StyleSheet.create({
 addNoteForm: {
 padding: 10,
 borderBottomWidth: 1,
 borderBottomColor: '#ccc',
 },
 input: {
 height: 40,
 borderColor: 'gray',
 borderWidth: 1,
 marginBottom: 10,
 paddingLeft: 8,
 },
});

export default AddNoteForm;</code></pre>
This component represents the form for adding new notes. It uses the <code>useState</code> hook to manage the input field's state and the <code>useNoteContext</code> hook to dispatch the <code>ADD_NOTE</code> action.
Purpose:
&nbsp; - Render a form for users to input new notes.
&nbsp; - Use state to manage the input field.
&nbsp; - Dispatch the `ADD_NOTE` action when the user adds a new note.
&nbsp;
App.js
<pre class="language-javascript"><code>import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { NoteProvider } from './src/components/NoteContext';
import NoteList from './src/components/NoteList';
import AddNoteForm from './src/components/AddNoteForm';

const App = () =&gt; {
 return (
 &lt;NoteProvider&gt;
 &lt;SafeAreaView style={styles.container}&gt;
 &lt;AddNoteForm /&gt;
 &lt;NoteList /&gt;
 &lt;/SafeAreaView&gt;
 &lt;/NoteProvider&gt;
 );
};

const styles = StyleSheet.create({
 container: {
 flex: 1,
 backgroundColor: '#fff',
 },
});

export default App;</code></pre>
The main entry point of the application. It wraps the entire application with the <code>NoteProvider</code> to ensure that the note context is available to all components. It includes the <code>AddNoteForm</code> and <code>NoteList</code> components.
Purpose:
&nbsp; - Render the entire application.
&nbsp; - Wrap the app with the `NoteProvider` to provide the note context.
&nbsp; - Include the `AddNoteForm` and `NoteList` components.
&nbsp;
Demo App
<img title="" src="https://assets.blackslate.io/posts/01/fHCoknYkb6fYdum.png" alt="screenshot" width="351" height="800">
&nbsp;
Adding a Note
<img title="" src="https://assets.blackslate.io/posts/01/HpuKuhpLhiNZExl.png" alt="screenshot" width="351" height="800">
&nbsp;
Removing a Note
<img title="" src="https://assets.blackslate.io/posts/01/YrsKpJEJ14P9vVF.png" alt="screenshot" width="351" height="800">
&nbsp;
<h3>Conclusion</h3>
Our exploration into React Native hooks has unveiled a powerful arsenal for crafting dynamic and efficient mobile applications. From the foundational `useState` and `useEffect` hooks to the nuanced capabilities of `useContext`, `useReducer`, and others, we've navigated through the theoretical landscape.
By applying these concepts in our unified "Notebook" application, we've witnessed firsthand how React Native hooks simplify state management, streamline logic, and elevate the overall development experience. The clear folder structure and modular components have not only demonstrated the practical implementation of these hooks but also emphasized the importance of clean and organized code.
As you embark on your React Native journey, armed with this newfound understanding of hooks, may your projects flourish with enhanced functionality and maintainability. Experiment, iterate, and build with confidence, knowing that React Native hooks are your steadfast companions in the realm of mobile app development.
Happy coding!

Newsletter

Related Articles

Europe Copyright reform may affect Open Source Ecosystem

Building a CRUD To-Do List App in React Native with Expo: A Step-by-Step Guide

Mastering API Integration in React Native with Expo: A Comprehensive Guide

React Native Navigation and Routing with Expo: A Comprehensive Guide

useEffect Hook Unleashed: Data Fetching and API Calls in React

Building a Weather App in React Native with Expo: A Step-by-Step Guide

Building Your First React Native App

Understanding React Native Components and UI Elements

Getting Started with React Native: An Introduction

Suggested keywords:

Newsletter

Related Articles