Data Normalization in Frontend Apps Using Normalizr and JSON API Normalizer

Photo of Sławomir Kołodziej

Sławomir Kołodziej

Updated Sep 28, 2023 • 4 min read

Data normalization is useful when app state is getting too big, has deeply nested information and difficult to use.

When normalizing data we need to follow few rules:

  • data structure should be flat
  • each entity should be stored as different object property
  • relationships with other entities should be created based on ids

This post will present two packages that help with data normalization in frontend apps.

JSON API Normalizer

JSON API is a standard that helps API developers to create consistent responses and API users to create requests. You can read more about JSON API in documentation.

Responses in JSON API format are very easy to use but we can make them even better. We will use JSON API Normalizer to normalize our data.

Example below shows us the data before and after normalization:

JSON API Normalizer created two entities `articles` and `people`. This helps us to check if response has the data that we wanted, without checking property `type`.

Normalized data is a lot easier to use in frontend. Using JSON API Normalizer doesn’t require much effort and configuration.


Normalizr is a very useful package that uses custom schemas definition to create normalized data.

When fetching data about blog post we can expect data in format like this:

   "id": 1,
   "title": "My blogpost",
   "description": "Short blogpost description",
   "content": "Hello world",
   "author": { 
      "id": 1,
      "name": "John Doe"
   "comments": [ 
         "id": 1,
         "author": "Rob",
         "content": "Nice post!"
         "id": 2,
         "author": "Jane",
         "content": "I totally agree with you"

This kind of data structure seems totally fine, but when we will store more blog posts we will observe duplication of authors data. As our blog grows, we may add categories and relationships between comments and users. There is no need to store all of that in one object.

The solution for that is Normalizr:

  import { schema } from 'normalizr';

// Data about author will be stored in 'authors' object
const authorSchema = new schema.Entity('authors');

// Data about comment will be store in 'comments' object
const commentSchema = new schema.Entity('comments');
// Post object has information about one author and many comments stored in array 
// Author information is stored in 'author' and comments array is 'comments`
const postSchema = new schema.Entity('posts', {
  author: authorSchema,
  comments: [commentSchema]
// Create normalized data from 'blogposts' object with schema - 'postSchema'
const normalizedBlogposts = normalize(blogposts, postSchema);

The only requirement is that each entity (post, comment, author) has the `id` property.

Example below shows us the data before and after normalization:

Pros of this solution:

  • updating comment and author data is very easy
  • you can easily show all posts, authors and comments
  • there is no data duplication


  • displaying few comments in a post requires passing an object with all comments
  • in small apps without a lot of data duplication, normalizing data may not be necessary


JSON API Normalizer automatically (without configuration) transforms data in JSON API standard to normalized data

Normalizr allows to normalize data using schemas

Photo of Sławomir Kołodziej

More posts by this author

Sławomir Kołodziej

Sławek is a self-taught Javascript enthusiast. He decided to pursue this career, because everyone...
How to build products fast?  We've just answered the question in our Digital Acceleration Editorial  Sign up to get access

We're Netguru!

At Netguru we specialize in designing, building, shipping and scaling beautiful, usable products with blazing-fast efficiency

Let's talk business!

Trusted by: