HomeCoursesSimplifying State Management in React Native

5.0

Intermediate

27h

Updated 4 months ago

Simplifying State Management in React Native

Gain insights into state management in React Native, including Redux, MobX, XState, Jotai, and React Query. Explore strategies for data consistency and synchronization across your applications.

Join 2.7 million developers at

Overview

Content

Reviews

State management is a process of managing an application’s data. As a developer, it is important to ensure data remains consistent and synchronized across different application parts. You’ll start by learning the state management strategies in React Native using state and props and create a real-world Funbook application using only React Native built-in solutions. You’ll learn about the Redux and MobX libraries and how these can be used to implement the like button in the app. Next, you will implement the like button using the XState library that treats the state as a finite state machine. You’ll also learn about the Jotai library that uses atomic state for state management. Finally, you’ll learn how React Query offers comfortable fetching and data mutation on the server that replaces global state management needs. After completing this course, you will be equipped to implement complex state management functionalities, ensuring data consistency and synchronization across different application parts.

State management is a process of managing an application’s data. As a developer, it is important to ensure data remains consiste...Show More

WHAT YOU'LL LEARN

Familiarity with the core components of React Native, including states, props, hooks, and context

Working knowledge of planning and setting up the surfaces, data flows, and components in the React Native app

Hands-on experience styling different components and populating the data in the React Native app

Familiarity with the state management libraries in React Native, including Redux, MobX, XState, Jotai, and React Query

Familiarity with the core components of React Native, including states, props, hooks, and context

TAKEAWAY SKILLS

React.js

Mobile Application Development

Content

73 Lessons10 Quizzes

Before We Begin

2 Lessons

Get familiar with React Native state management techniques via practical development of a social media clone.

Overview

Structure of the Course

What Are React and React Native?

6 Lessons

Look at React and React Native's history, core concepts, components, and real-world applications.

Overview

History of ReactJS

ReactJS Component Foundation

React Native

Summary: React and React Native

Quiz: React and React Native

Managing State in a Simple React App

7 Lessons

Break apart state management basics, hooks, and a simple social media app structure.

Overview

What Is State and How Is It Different From Props?

What Are Stateful and Stateless Components?

Which Hooks Should We Know?

Social Media App Structure

Summary: Managing State in a Simple React App

Quiz: Managing State in a Simple React App

Planning and Setting Up the Funbook App

6 Lessons

Grasp the fundamentals of planning, structuring, previewing, and debugging for effective app development in React Native.

Overview

Planning the Required Surfaces and Components

Planning Data Flows in the App

Getting Comfortable Previewing and Debugging the App

Summary: Create a Real Working App

Quiz: Creating a Real Working App

Styling and Populating the Funbook App

8 Lessons

Map out the steps for styling, populating, and integrating data in the Funbook app.

Overview

Creating and Styling the Feed Surface

Creating and Styling the Conversations Surface

Pulling in Data for the App

Challenge: Building the Profile Surface

Solution: Building the Profile Surface

Summary: Styling and Populating the App

Quiz: Styling and Populating the Funbook App

Implementing Redux in Our Funbook App

8 Lessons

Tackle Redux state management in Funbook app with Redux Toolkit, actions, reducers, and global state handling.

Overview

What Is Redux?

Redux Core Concepts

Adding Redux Functionalities to the App

Combining Various Pieces of Global State

Taking Advantage of Redux Toolkit for Creating Actions

Summary: Implementing Redux in Funbook App

Quiz: Implementing Redux in Our Funbook App

Using MobX as a State Manager in a React Native App

9 Lessons

Practice using MobX for state management, transitioning state management, and improving data handling.

Overview

MobX Concepts and Configuration

Using MobX For FavoritedImages

Creating the Store

Fetching Data

Adding Actions

Deriving Data from State

Summary: Using MobX as a State Manager in a React Native App

Quiz: Using MobX as a State Manager in a React Native App

Untangling Complex Flows in React Native Apps with XState

9 Lessons

Break down complex flows in React Native using XState for efficient state management.

Overview

What Are Finite State Machines?

Configuring XState in the Funbook App

Using XState for the FavoritedImages Surface

Fetching Image Data

Managing the Image in the Image Modal

Liking Images

Summary: Untangling Complex Flows with XState

Quiz: Untangling Complex Flows with XState

Integrating Jotai in a React Native App

7 Lessons

Unpack the core of Jotai for efficient state management in React Native apps.

Overview

What Is Recoil and an Atomic State?

Configuring and Using Jotai in the Funbook App

Fetching Data with Jotai

Adding Read-Write Functionality to the ImageListAtom Function

Summary: Integrating Jotai in a React Native App

Quiz: Integrating Jotai in a React Native App

10.

Using React Query for Server-Side-Driven State Management

6 Lessons

Go hands-on with React Query for efficient server-side state management in React Native.

Overview

What Is React Query?

Using React Query for Data Fetching

Other React Query Functionalities

Summary: React Query for Server-Side-Driven State Management

Quiz: Using React Query for Server-Side-Driven State Management

11.

Conclusion

1 Lessons

Enhance your skills in React and state management for exceptional frontend development.

Closing Thoughts

12.

Appendix

3 Lessons

Map out the steps for environment setup, key resources, and expert insights.

Environment Setup

Important Links

Important Conversations

Build an E-Commerce App with React Native, Redux, and Firebase

Project

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Packt

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Course

Building Applications with React Native

Gain insights into building applications with React Native Expo. Learn essential development concepts to create career opportunities and enhance your skills using familiar web technologies.

15 h

intermediate

Course

Master State Management in Flutter

Gain insights into mastering Flutter state management with Riverpod. Learn about reducing widget rebuilds and best practices to enhance your cross-platform app development skills.

18 h 40 m

intermediate

Course

Building Full-Stack Web Applications With Node.js and React

Gain insights into building robust full-stack web apps using Node.js and React. Learn server-side with Node.js, client-side with React, and deploy with Heroku.

17 h

beginner

Course

JavaScript Fundamentals Before Learning React

Gain insights into JavaScript ES6+, ternary operators, 'this' object, built-in functions, and core concepts like composability and immutability to ease your React learning journey.

3 h

beginner

Course

Creating Five Impactful Applications with ReactJS

Gain insights into creating five dynamic applications with ReactJS. Delve into hooks, APIs, and localStorage while building projects like to-do lists, quizzes, memory games, portfolios, and GitHub profiles.

18 h

intermediate

Course

React Deep Dive: From Beginner to Advanced

Gain insights into React from basics to advanced, explore its ecosystem, and delve into best practices and the latest straightforward methods for efficient use.

16 h 40 m

beginner

Course

Building Applications with React Native

intermediate

15 hour

Course

Master State Management in Flutter

intermediate

18 hour 40 min

Course

Building Full-Stack Web Applications With Node.js and React