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 `useMemo` Hook is used to store or cache the results of expensive calculations and computations between rerenders of a component. This improves the performance of the application since the expensive computations do not have to be calculated every time the component rerenders.

# Usage

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


# Syntax

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

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

const App = () => {

  const [counter, setCounter] = useState(0);
  const [value, setValue] = useState(12);
  const fib = (n) => (n < 2) ? n : fib(n-1) + fib(n - 2);
  const storedResult = useMemo(() => fib(value), [value]);

  useEffect(() => {
    Alert.alert("Component rendered");
  }, [counter]);

  return (
      <SafeAreaView style={styles.container}>

        <Text style={styles.text}> Fibonacci value: { storedResult } </Text>
        <View style={styles.separator}></View>

        <Text style={styles.text}> Counter value: { counter } </Text>
        <View style={styles.separator}></View>

        <Button 
          title="Increment Counter"
          onPress={() => setCounter(counter + 1)}
        />
      </SafeAreaView>
  );
}

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

export default App;

The `useMemo` Hook takes these two arguments:

- **Function:** This is a function that does expensive computations. In the code snippet above, we have passed the function `fib` to the `useMemo` Hook. The `fib` is a recursive function that calculates the $nth$ Fibonacci number.

- **Dependency array:** This array is similar to the dependency array passed to the `useEffect` Hook. The function we pass to the `useMemo` Hook is only executed when at least one value passes to the dependency array changes. This improves performance since the function does not execute every time the component rerenders. In the code snippet above, we have passed the value of the `value` variable inside the dependency array. Hence, the `fib` function will only execute between rerenders if the value of the `value` variable has changed. Otherwise, it will return the cached or memoized result.

The code snippet above is a simplistic example of how the `useMemo` improves performance. Every time the user clicks the button, the value of the `counter` variable is updated, and the component is rerendered. If we do not use the `useMemo` Hook, the `fib` function will also execute every time the `counter` variable is updated. The improvement in performance won't be visible in the case of the scenario above. However, it will be evident if we replace the `fib` function with a function that does heavy and resource-intensive calculations and tasks.

# Coding playground

The Android widget below demonstrates the concepts learned in this lesson. This code displays the Fibonacci value calculated based on the `value` state using the `useMemo` Hook. It also shows a counter value that can be incremented using a button, triggering a component rendering alert due to the `useEffect` Hook.

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 useMemo 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

useMemo