Home>Courses>Simplifying State Management in React Native

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.

Intermediate

73 Lessons

27h

Certificate of Completion

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.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

37 Playgrounds

10 Quizzes

Course Overview

What You'll Learn

Course Content

Recommendations

Course Overview

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 ...Show More

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

TAKEAWAY SKILLS

React.js

Mobile Application Development

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

Course Content

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

Course Author

Packt

Trusted by 2.6 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."

Carlos Matias La Borde

Software Developer

"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

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

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

Instant 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.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

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!

Recommended before starting this course

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.

beginner

3 hours

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.

intermediate

18 hours

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.

beginner

16 hours 40 mins

Course

JavaScript Fundamentals Before Learning React

beginner

3 hour

Course

Creating Five Impactful Applications with ReactJS

intermediate

18 hour

Course

React Deep Dive: From Beginner to Advanced

beginner

16 hour 40 min

Related Courses and Skill Paths

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.

intermediate

15 hours

Course

Master State Management in Flutter

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

intermediate

18 hours 40 mins

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.

beginner

17 hours

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