Discover React Native for creating rich, cross-platform mobile apps with reusable components. Gain insights into UI components, styling, navigation, Hooks, state, and database management.

native.tar.gz

reactNative

React Native is a well-known mobile application development framework that allows developers to create rich, cross-platform mobile application UI using reusable components. It's ideal for building mobile applications and supports multi-platform reusable code, pre-built components, and a rich UI. Most well-known social media platforms, such as Facebook and Instagram, have been built using React Native. 

In this course, you’ll start with a brief introduction to React Native and then cover various built-in components of React Native categorized into different categories such as basic, user interface, user interaction, and list view components. Next, you’ll learn about concepts such as application styling, navigation, Hooks, state management, and database management. You’ll find interactive quizzes and challenges throughout the course to test your understanding.

By the end of this course, you’ll be able to develop mobile applications and kickstart your journey as a React Native developer.

Getting Started with Mobile App Development with React Native

The `useCallback` Hook is used to optimize the performance of applications. It is used when we want to prevent unnecessary rerenders of a component. The `useCallback` receives a function and then creates a unique identity for that function, which remains active until the dependencies passed to the Hook have changed, i.e., the component will only rerender when the dependencies change. Dependencies can be the props passed to the component.

# Usage

To implement and use the `useCallback` Hook, we first have to import it from the `react` library.

import React, { useCallback } from "react";

# Syntax

Once the `useCallback` Hook has been imported, we can use it inside our application.

import React, { useState, useCallback } from 'react';
import {SafeAreaView, View, Text, Button, Alert, StyleSheet} from 'react-native';

const functions = new Set();

const App = () => {
  const [age, setAge] = useState(25);
  const [salary, setSalary] = useState(65000);

  const incrementAge = useCallback(() => {
    Alert.alert('incrementAge function rendered');
    setAge(age + 1);
  }, [age]);

  const incrementSalary = useCallback(() => {
    Alert.alert('incrementSalary function rendered');
    setSalary(salary + 1000);
  }, [salary]);

  functions.add(incrementAge);
  functions.add(incrementSalary);
  
  return (
  <SafeAreaView style={styles.container}>
    <Text style={styles.text}> Age: { age } </Text>
    <Text style={styles.text}> Salary: { salary } </Text>
    <Text style={styles.text}> Newly created functions size: { functions.size }</Text>
    <View style={styles.separator}></View>
    <Button 
      title="Increment age"
      onPress={ incrementAge }
    />
    <View style={styles.separator}></View>
    <Button 
      title="Increment salary"
      onPress={ incrementSalary }
    />
    <View style={styles.separator}></View>
  </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    fontSize: 30
  },
  separator: {
    margin: 20
  }
})

export default App;

The `useCallback` Hook takes these two arguments:

- **Function:** This is a function that does expensive computations or tasks. Therefore, we want this function to rerender or recreate only when certain dependencies passed to the `useCallback` Hook have changed. This improves the application's performance. In the code snippet above, we have passed the functions `incrementAge` and `incrementSalary` to the `useCallback` Hook.

- **Dependency array:** This array is similar to the dependency array passed to the `useEffect` Hook. The function we pass to the `useCallback` Hook is only rerendered or recreated when at least one value passed to the dependency array changes. This improves performance since the function does not rerender needlessly every time. In the code snippet above, we have passed the `age` and `salary` values inside the dependency array. Hence, the `incrementAge` and `incrementSalary` functions will only be recreated if the values of the `age` and `salary` variables have changed. Otherwise, it will return the cached or memoized result.

The code snippet above is a simplistic example of how the `useCallback` Hook improves performance. Every time the user presses the "Increment age" or "Increment salary" button, the corresponding `age` and `salary` variables are updated, and the `App` component is rerendered. We store the newly created functions inside the `functions` set and display the size of the set on each rerender. In the code snippet above, the set size increases by one every time, and the function recreated depends on the button we click. If we had not used the `useCallback` Hook, the set size would have increased by two each time. This is because both the `incrementAge` and `incrementSalary` functions would have been recreated every time, regardless of whether the values of `age` and `salary` had changed or not.

# Coding playground

The Android widget below demonstrates the concepts learned in this lesson. This code demonstrates the usage of the `useCallback` Hook in React to optimize function performance by memoizing them. The age and salary values are displayed and can be incremented, and the size of the newly created functions set is also shown. 

Play around with the code inside the `App.js` file to get hands-on learning experience with these concepts. All the other files and folders inside the widget can be ignored.

> **Note:** Click the "Run" button on the Android widget below to execute the program. Wait for the program to compile inside the "Terminal" tab of the widget, and then switch to the "Output" tab once the program has been successfully compiled.

Learn how to use the useCallback Hook in functional components.

Before We Begin

Introduction to React Native

Basic Components

User Interface and User Interaction

List View

Android Components and APIs

Miscellaneous Components and APIs

Application Styling

Navigation

Hooks

State Management

Database Management

Appendix

useCallback