---
title: "An Introduction to Global State Management in React without a Library | CoderPad"
description: "Good data management and communication between individual components are pivotal for cleaner code and improved data sharing between components. This article introduces you to state and global state in React and the various ways to manage global state without a library in React."
canonical: "https://coderpad.io/blog/development/global-state-management-react/"
last_modified: "2026-04-15 16:21:08"
---
[Back to blog](https://coderpad.io/blog/)

# An Introduction to Global State Management in React without a Library

October 7, 2022 11 Minute Read

By Victory Tuduo

[Development](https://coderpad.io/blog/development/)

Scalable React projects tend to contain code bases with numerous components making up the primary application. Good data management and communication between these individual components is pivotal for cleaner code, and improved data sharing between components.

Global state management was created as a means to centralize and manage data in an application, making it easily mutable and available to all components in the application. Finding and implementing a suitable means to handle global state management is an integral part of an application.

In this article, we will give you a deep dive on the terms state and state management in React, and discuss the best choices for managing global state in a React application. We will also cover different methods of managing global state in a React application without the use of any 3rd party library or packages.

## What is state and global state in React?

In JavaScript applications, state refers to all data the application needs in order to operate. State can be stored in any data type, including arrays, booleans, strings, or numbers.

Within React apps, global state is a JavaScript object that stores data used by React to render components with dynamic content based on user action. Applications can include this global state for both functional and class components.

State can be transferred across components in React apps in different ways depending on the state management technique used.

## What is state management?

State management is a method of controlling communication between different parts of state and their usage, including React components.

Except for extremely simple applications, components need to communicate with each other. For example, in an e-commerce application, a cart component needs to communicate to the site header component to show how many items are currently in the cart.

### Why state management is crucial

Components are used in the development of React apps, and these components often manage state on their own because a state object can be included directly in React components.

When present, the component’s state is considered “encapsulated data” and contains the properties that are persistent across component renderings. This is effective for applications with few components, but as the application grows, it becomes difficult to control the complexity of shared state between components.

When state management is implemented:

- Data is consolidated, making it easier to reason with your app’s logic.
- The location of your data is always known.
- You can get a point-in-time snapshot of all the data stored globally.
- Your development will proceed more quickly as a result of this better developer experience.

### Use cases where global state management plays a pivotal role

Global state management is useful in virtually every type of app, but some examples of where it may be particularly critical include:

- Ecommerce applications: In a standard ecommerce application, there are usually many components that communicate with each other and multiple actions that users can take which causes the data to change. For example, a wish list for users, where items can be added and saved by a user, to be shopped on later in the future.
- Educational applications: Global state management is useful in educational applications that feature a user management platform, where its visitors can log in, sign in, enroll in a course, etc. All these are made possible by state management.
- Applications with authentication: Without state management, it would be very hard to build applications where users need to be authenticated. This is due to the fact that most user information would be required by multiple components in the application for security and in order to present the user with the corresponding data stored in the application database. This is made possible with the use of state management, which tells if the user is authenticated and provides information about the user.
- Personalized applications & websites: In order to provide users with a personalized experience, some user data has to be saved in the application. Without state management, this would be difficult. This is because state management takes in the user’s preferences and actions, and uses this to determine what kind of content the user receives, ex: YouTube and Pinterest.

## Methods of managing state in React

There are multiple ways we can manage global state in React applications. Let’s take a look at the basic approaches to managing state:

- React Hooks (e.g.`useState`and`useReducer`)
- React’s Context API
- State Management Libraries (e.g. Redux and Recoil)

Each state management technique is used to build React applications of different scales, ranging from small-scale to large-scale applications.

For example, relying on React Hooks like`useState`and`useReducer`for global state, although [encouraged](https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both) by the React Docs, only really works well for small and simple React applications.

As the number of features and the size of the application increases, we begin to increasingly rely on “ [prop drilling](https://kentcdodds.com/blog/prop-drilling) ” to pass state between components and it becomes hard to manage the application state with only hooks.

This is where the [Context API](https://reactjs.org/docs/context.html) or state management libraries can come in.

But we’re getting ahead of ourselves; let’s start by taking a look at React’s`useState`and`useReducer`hooks.

## React Hooks

According to the [React Docs](https://reactjs.org/docs/hooks-overview.html#but-what-is-a-hook), “Hooks are functions that let you ‘hook into’ React state and lifecycle features from function components.”

The`useState`hook, for example, is useful for setting and updating a React component’s state and the`useReducer`hook lets you manage the local state of complex components with a reducer.

Let’s dive in and see how we can use these hooks to manage the application state in our React application.

### useState hook

With`useState`you can set a value of state within a component.

```
const [state, setState] = useState(initialState);Code language: JavaScript (javascript)
```

`useState`is a function that takes in the initial state (`initialState`in the code above) as an argument.

React will preserve this state between re-renders.`useState`returns two things that we can obtain by [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment): the current state value and a function that lets you update it.

You can call this function`setState`function in order to update the`state`to a new value.

Consider this example:

```
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      <h1> State management 101 </h1>
      <button onClick={() => setCount(count + 1)}>Clicked me {count} times</button>
    </div>
  );
}Code language: JavaScript (javascript)
```

In the simple code example above you can see how the state is updated when we call the`setCount`function by clicking on the button.

Now, let’s use a bit more practical of an example. We’ll take a look at hooks in this Books component –`./src/Books.js`:

```
// ./src/Books.js

import React, { useState } from "react";
// array of book objects
const books = [{
    title: "Harry Potter and the Deathly Hallows",
    price: "5.00",
    rating: "5.0"
  },
  {
    title: "Harry Potter and the Goblet of Fire",
    price: "5.00",
    rating: "4.8"
  }
];
export function Books() {
  // create state variables with initial values
  const [savedBooks, setSavedBooks] = useState([]);
  const [totalPrice, setTotalPrice] = useState(0);
  return (
    <div>
      <header>
        <p> No. of Books: {savedBooks.length} </p>
        <p> Total price: ${totalPrice} </p>
      </header>
      <ul className="Books">
        {books.map((book) => {
          return (
            <li className="book" key={book.name}>
              <header>
                <h3> {book.title} </h3>
                <p>Rating: {book.rating} </p>
                <p> ${book.price} </p>
              </header>
              <button> Add </button>
              <button> Remove </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}Code language: JavaScript (javascript)
```

Then in`./src/App.js:`

```
//./src/App.js

import { useState } from "react";
import { Books } from "./Books";
export default function App() {
  return (
    <div className="App">
      <Books />
    </div>
  );
}Code language: JavaScript (javascript)
```

In the`Books`component, we imported the`useState`Hook from React. Then we initialized two states of data:`savedBooks`and`totalPrice`.

With hooks, we can have multiple and independent state objects by just calling the`useState`function and providing an initial value for the state.

Let’s see how we can update the value of the state:

To do that, we’ll create a function that will update our state with some data. First, we’ll create a function that will add a book from the`books` [array](https://coderpad.io/blog/development/javascript-array-methods/) to our`savedBooks`array and set the price.

```
// ./src/Books.js

import React, { useState } from "react";
// array of book objects
const books = [{
    id: "001",
    title: "Harry Potter and the Deathly Hallows",
    price: "5.00",
    rating: "5.0"
  },
  {
    id: "002",
    title: "Harry Potter and the Goblet of Fire",
    price: "5.00",
    rating: "4.8"
  }
];
export function Books() {
  // create state variables with initial values
  const [savedBooks, setSavedBooks] = useState([]);
  const [totalPrice, setTotalPrice] = useState(0);

  // functions to set the state
  const add = (id) => {
    // set state for savedBooks
    setSavedBooks([books[0]]);
    // set state for totalPrice
    setTotalPrice(books[0].price);
  };

  // reset state values
  const remove = () => {
    // reset values
    setSavedBooks([]);
    setTotalPrice(0);
  };
  return (
    <div>
      <header>
        <p> No. of Books: {savedBooks.length} </p>
        <p> Total price: ${totalPrice} </p>
      </header>
      <ul className="Books">
        {books.map((book) => {
          return (
            <li className="book" key={book.name}>
              <header>
                <h3> {book.title} </h3>
                <p>Rating: {book.rating} </p>
                <p> ${book.price} </p>
              </header>
              <button onClick={add}> Add </button>
              <button onClick={remove}> Remove </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}Code language: JavaScript (javascript)
```

From the code above, you can see we’ve created two functions,`add()`and`remove()`.

In the`add()`function, we use the`setSavedBooks()`function to set the value of`savedBooks`to the first item in the`books`array.

The`add()`function also uses the`setTotalPrice()`function to set the value of`totalPrice`to the price of the first item in the`books`array.

We fire the`add()`function using the`onClick` [event listener](https://coderpad.io/blog/development/addeventlistener-javascript/) on the Add button.

Once the button is clicked,`savedBooks`is assigned the value of the first book in the`books`list (`"Harry Potter and the Deathly Hallows"`) and`totalPrice`now contains the price of that same first book ( $`5.00`).

The`remove()`function, when clicked, sets`savedBooks`to an empty array and`totalPrice`to`0`. You can try out this example of`useState`here:

Now that we’ve seen how we can set up and update state data with`useState`, let’s explore how the`useReducer`hook may be used to update the state while using the current state since we’ve been using static, hard-coded values.

Real-world applications necessitate setting the new state based off of the old state rather than overwriting with an original issue. Let’s dive in.

### useReducer hook

Unlike`useState`which simply replaces the set value with a new one, e.g when we fired the`add()`function, it replaced the content of`savedBooks`state with the new data, we will be able to update the state based on the previous state using`useReducer`. Similar to the [Array Reduce method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce), this hook is intended to update the state based on the current state.

Let’s start by creating a`savedBooksReducer`function that takes in two arguments:`state`and`action`.

`state`is the current state,

`action`is an object which contains the following two properties:

- the`book`object and
- the`type`of action to be carried out on the value of the state –`"add"`or`"remove"`.

```
// ./src/Books.js

...// saved books reducer function
const savedBooksReducer = (state, action) => {
  // get the book object and the type of action by destructuring
  const { book, type } = action;
  // if "add"
  // return an array of the previous state and the book object
  if (type === "add") return [...state, book];
  // if "remove"
  // remove the book object in the previous state
  // that matches the title of the current book object
  if (type === "remove") {
    const bookIndex = state.findIndex((x) => x.title === book.title);
    // if no match, return the previous state
    if (bookIndex < 0) return state;
    // avoid mutating the original state, create a copy
    const stateUpdate = [...state];
    // then splice it out from the array
    stateUpdate.splice(bookIndex, 1);
    return stateUpdate;
  }
  return state;
};
...

export default function Books() {
    ...
}Code language: JavaScript (javascript)
```

The next step involves creating a function called`totalPriceReducer`, which accepts the same arguments as`savedBooksReducer`but only adds and subtracts the value of the previous state to and from the new state, respectively.

```
// ./src/Books.js

// ...

function totalPriceReducer(state, action) {
  let { price, type } = action;
  // price = parseFloat(price);
  if (type === "add") return state + price;
  // return the value when the type of action was not "add"
  // subtract the new book price from the previous state
  if (state - price < 0) return 0;
  return state - price;
}

// ...

export default function Books() {
  // ...
}Code language: JavaScript (javascript)
```

Note that here, we have a condition that if (state – price) is ever less than 0 (negative), the calculation is reset to 0.

Let’s use our refactored functions in`useReducer`now that we have them.

```
// ./src/Books.js

// ...

export function Books() {

  // replace useState with useReducer and pass two arguments
  // the first argument is the reducer function
  // the second function is the initialState
  const [savedBooks, setSavedBooks] = useReducer(savedBooksReducer, []);
  const [totalPrice, setTotalPrice] = useReducer(totalPriceReducer, 0);

  // functions to set the state
  // to add items and price
  const add = (book) => {

    // set state for savedBooks
    // pass an object containing the book and type of action, "add"
    setSavedBooks({ book, type: "add" });

    // set state for totalPrice
    setTotalPrice({ price: book.price, type: "add" });
  };

  // reset state values
  // to remove items and price
  const remove = (book) => {
    setSavedBooks({ book, type: "remove" });
    setTotalPrice({ price: book.price, type: "remove" });
  };

  return (
      // ...
    );
}Code language: JavaScript (javascript)
```

Each of the functions are returned from their respective`useReducer`functions takes an object as an argument.

```
const [savedBooks, setSavedBooks] = useReducer(savedBooksReducer, []);
const [totalPrice, setTotalPrice] = useReducer(totalPriceReducer, 0);Code language: JavaScript (javascript)
```

For`setSavedBooks`, it can take, for example, the object –`{book, type: "add"}`as an argument, while,`setTotalPrice`can also take this object –`{price: book.price, type: "add"}`as an argument.

These objects are then passed into their respective reducer functions to update the state.`setSavedBooks`for example passes its object into`savedBooksReducer`.

Also, having changed our`add()`and`remove()`functions to accept a`book`argument, we can now give the`book`as input to our template’s buttons`onClick`listener.

```
export function Books() {
  // ...

  return (
    <div>
      { // ... }
        <ul className="Books">
          {books.map((book) => {
            return (
              <li className="book" key={book.name}>
                <header>
                  <h3> {book.title} </h3>
                  <p>Rating: {book.rating} </p>
                  <p> ${book.price} </p>
                </header>
                <button onClick={() => add(book)}> Add </button>
                <button onClick={() => remove(book)}> Remove </button>
              </li>
            );
          })}
        </ul>
      </div>
  );
}Code language: JavaScript (javascript)
```

Now, when we click on Add or Remove, the reducer function adds the new data to the previous state without overwriting it. Here’s an example of what that implementation of`useReducer`would look like:

So far, we’ve been dealing with state contained in one component. In a real-world app, we’ll need to pass data/state between multiple components, from parent to child, child to parent, and between sibling components (components with the same parent).

In the next section, we’ll take a look at how we can manage state between components using props.

## Props

“Props” is short for “properties” and they are arguments passed to React components. We use props to pass data from the parent to child component.

To illustrate this, we’ll move our`books`array,`savedBooksReducer`and`totalPriceReducer`functions to our`./src/App.js`file.

```
// ./src/App.js

import { Books } from "./Books";

// array of book objects
const books = [// ...
];

// saved books reducer function
const savedBooksReducer = (state, action) => {
  // ...
};

// total price reducer function
function totalPriceReducer(state, action) {
  // ...
}

export default function App() {
  return (
    <div className="App">
      <Books
        books={books}
        savedBooksReducer={savedBooksReducer}
        totalPriceReducer={totalPriceReducer}
      />
    </div>
  );
}Code language: JavaScript (javascript)
```

As you can see from the code above, in order to pass the data into the`<Books>`component, we use JSX component bindings and pass the data.

To access this data from within the component we destructure the`props`parameter in our`Books`function definition.

```
// ./src/Books.js

import React, { useReducer } from "react";

export function Books({ books, savedBooksReducer, totalPriceReducer }) {
  // ...
}Code language: JavaScript (javascript)
```

>

![✅](https://coderpad.io/assets/emoji/2705.svg) You can see these props in action in the Context API sandbox example below.

While this is great for simple applications, when the application begins to scale and data needs to be passed from children back up to parents, between sibling components, or even globally throughout the app, relying only on props might not be such a great idea.

Next, we’re going to look at the Context API which helps us share state a bit better.

## Context API

Context API provides a way to move data up and down the component tree of your app without having to manually pass props through numerous component levels. You can configure a “global” state for a tree of React components using Context. Once this is done, the state is accessible from any component in the tree without passing it through intermediary components.

Let’s further restructure our application by creating a new component,`SavedBooks`, which will contain the total number of saved books and the total price. The`Books`component will still contain the list of books.

Before we do that, let’s set up a global state in our application with the Context API.

### Initialize context

Create a new file`./src/modules/BooksContext.js`specifically for our context, and then import`createContext`and use it to create our`BooksContext`.

```
// ./src/modules/BooksContext.js

import React, {createContext} from "react"
export const BooksContext = createContext()Code language: JavaScript (javascript)
```

Next, we create a context provider.

### Create a context provider

A context object comes with a`Provider`component that allows components wrapped within it to subscribe to context changes.

We’re going to once again move our`books`array and`savedBooksReducer`functions to our`./src/modules/BooksContext.js`file and initialize the state within a new`BooksProvider`function using the`useState`and`useReducer`hook.

```
// ./src/modules/BooksContext.js

import React, { useContext, useReducer, useState } from "react";

// array of book objects
const bookList = [// ...
];

// saved books reducer function
const savedBooksReducer = (state, action) => {
  // ...
};

export const BooksContext = createContext();

export const BooksProvider = (props) => {
  const [books, setBooks] = useState(bookList)
  const [savedBooks, setSavedBooks] = useReducer(savedBooksReducer, [])
  return <BooksContext.Provider> {props.children} </BooksContext.Provider>
}Code language: JavaScript (javascript)
```

In the code above, you can see that we’re returning the Provider component`<BooksContext.Provider`> from`BooksProvider`.

`props.children`will allow us to render the components to be nested in the provider.

### Accessing the state

Components that are descendants of the Provider can access a`value`prop that the`<BooksContext.Provider>`component accepts.

All of our state must be entered into this`value`prop in our context file like so:

```
// ./src/modules/BooksContext.js

...
return (
  <BooksContext.Provider
    value={{
      bookList,
      setBookList,
      savedBooks,
      setSavedBooks,
    }}
  >
    {props.children}
  </BooksContext.Provider>
);
...Code language: JavaScript (javascript)
```

In order for this component to be accessible to the rest of our application, we’ll have refactor our`./src/App.js`file to use and wrap the application with the`BooksProvider`component:

```
// ./src/App.js

import { Books } from "./Books";
import { BooksProvider } from "./modules/BooksContext";

export default function App() {
  return (
    <BooksProvider>
      <div className="App">
        <Books />
      </div>
    </BooksProvider>
  );
}Code language: JavaScript (javascript)
```

To subscribe to the state passed to the provider component in our components, we have to import`BooksContext`and consume it with the`useContext`hook.

Here’s how we can do that in our`Books`component:

```
// ./src/Books.js

// import the useContext Hook
import React, { useContext } from "react";

// import the Context
import { BooksContext } from "./modules/BooksContext";

export function Books() {
  const { books, setSavedBooks } = useContext(BooksContext);

  // functions to set the state
  const add = (book) => {

    // set state for savedBooks
    // pass an object containing the book and type of action, "add"
    setSavedBooks({ book, type: "add" });
  };

  // reset state values
  const remove = (book) => {
    setSavedBooks({ book, type: "remove" });
  };

  return (
    <div>
      <ul className="Books">
        {books.map((book) => {
          return (
            <li className="book" key={book.name}>
              <header>
                <h3> {book.title} </h3>
                <p>Rating: {book.rating} </p>
                <p> ${book.price} </p>
              </header>
              <button onClick={() => add(book)}> Add </button>
              <button onClick={() => remove(book)}> Remove </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}Code language: JavaScript (javascript)
```

Based on the code above, we’re able to access`books`and`setSavedBooks`state from the`BooksContext`using`useContext`.

Now that we have our global state set up with context, let’s create our`SavedBooks`component:

```
// ./src/SavedBooks.js

import React, { useContext } from "react";
import { BooksContext } from "./modules/BooksContext";
export function SavedBooks() {
  const { savedBooks } = useContext(BooksContext);

  // function to get total price from savedbooks array
  const getTotalPrice = (savedBooks) => {
    const totalPrice = savedBooks.reduce(
      (totalCost, item) => totalCost + item.price,
      0
    );
    return totalPrice;
  };
  return (
    <header>
      <p> No. of Books: {savedBooks.length} </p>
      <p> Total price: ${getTotalPrice(savedBooks)} </p>
    </header>
  );
}Code language: JavaScript (javascript)
```

Finally, now that we’ve separated the`Books`component and created the`SavedBooks`component, let’s add it in`./src/App.js:`

```
// ./src/App.js

import { Books } from "./Books";
import { BooksProvider } from "./modules/BooksContext";
import { SavedBooks } from "./SavedBooks";
export default function App() {
  return (
    <BooksProvider>
      <div className="App">
        <SavedBooks />
        <Books />
      </div>
    </BooksProvider>
  );
}Code language: JavaScript (javascript)
```

Now, you can see that we’re able to pass the data between sibling components using the Context API:

Awesome!

## Up next: Comparing two state management libraries

So far, we’ve covered the basics of state management in a React application using React Hooks like`useState`and`useReducer`.

We’ve also seen how we can take local component state management a step further by setting up a global application state using the Context API which ships with React.

With this, we can build small to medium scale applications without having to install and depend on third party state management libraries.

Do you feel ready to dive into state management with libraries? Stay tuned for my article next week comparing Redux and Recoil.

My name is Victory Tuduo and I am a software developer who loves building web applications, creating flexible UI designs, mentoring, and writing technical articles. You can find out more about me and my work [here](https://twitter.com/vhicktri) and [here](https://victorytuduo.vercel.app/).

## Subscribe for more CoderPad insights

## Trending Articles

Previous slide Next slide [Development

## What is Prompt Engineering?

Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post.

Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development

## A Guide To Using React’s useCallback() Hook

Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together.

Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development

## MySQL vs. PostgreSQL: How Do They Compare?

A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you.

Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development

## PostgreSQL LIKE Operator: A Detailed Guide

When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator.

Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development

## How To Use DataProvider In TestNG With Examples

When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG.

Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development

## How To Get Up And Running With Django Migrations: A Guide

Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects.

Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development

## Writing A Parameterized Test In JUnit With Examples

A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide.

Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development

## How To Use Assert In JUnit With Examples

The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples.

Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development

## A Simple Guide To TypeORM: What It Is And How To Use It

Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is.

Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development

## Using PreparedStatement in JDBC With Examples

In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code.

Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development

## React vs React Native: The Differences Explained

React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice.

Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development

## Logging in Django

The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article.

Read the post](https://coderpad.io/blog/development/logging-in-django/)

## Hire with confidence.

See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.

[Request a demo](https://coderpad.io/sales/)