State Management in a React App in 2021

Presentational Components

  1. Only responsible for the DOM markup.
  2. They get data via props and communicate back only via callbacks we passed on as props.
  3. They might have a state, but most of the time, the state is lifted up to a container component and passed to the presentational component via props.
  4. Since presentational components are loosely coupled it’s really easy to reuse them.

Container Components

  1. Fetching data from backend APIs and forward them as props for presentational components.
  2. Composing dispatchable actions as callbacks for presentational components.
  3. Passing data from global store to presentational components.
  4. Storing local state/callbacks to trigger actions lifted from presentational components.

APIs

  1. Lots of boilerplate code to fetch data from an API. It’s a boring repetitive task.
  2. Pollutes the global state.
  3. Having to make redux state async adds additional complexity to the code base.
  4. API calls are duplicated if we want the same data in several components. So it impacts application performance. Of course, you can dedupe them with prop drilling but again it’s additional complexity.
  5. Duplicated API calls also mean additional renderings. Again it impacts application performance.

Alternative Approach to Data fetching — Custom Hooks

  1. A builtin cache for request deduplication
  2. Builtin optimistic rendering — first return the muted data from cache (stale), then send the fetch request (revalidate), and finally, come with the up-to-date data.
  3. Automatic retry on error.
  4. Polling on interval.
  5. Data revalidation on focus (If the user switch browser tabs or returned after locked ).

Redux Store

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React component lifecycle

Serving React & Node.js application with PM2 as a service (Linux /MacOS)

Webpack : The Complete Introduction .

Quickly Visualize Snowflake’s Roles, Grants, and Privileges

linux/centos find which folder using more space

I know to flat an array

Better ways to use HttpInterceptor in Angular 9 — Part 3 of guide to deal with APIs in angular.

Understanding Redux Through Implementation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pahan Sarathchandra

Pahan Sarathchandra

More from Medium

MobiScroll React timeline Calendar

Input Validation in React Hook Form & sending emails using EmailJS in ReactJS

Top 7 reasons to choose React for front-end development

How to send push notifications with Firebase and React