AmanAgarwal041

/**
	*	There were 3 violations to use Suspense in concurrent mode
	*
	* 1. Suspended Components should have a pending state for the suspensions to work
	*	2. We need to wrap api to a promisified function which provides states with pending promises or resolved data, so that we can read the states inside the components
	*	3. We don't need to have a state or useEffect to read the data in the suspended component
	*
***/

import { Suspense } from 'react';

AmanAgarwal041

Project Architecture For Front End Applications

Deciding how to design your project's architecture is still a complex thing. Everybody while starting a project goes through different articles and blogs to understand the ways to develop your project's architecture.

Working on a badly designed project's architecture is as difficult as designing it good.

The Architecture of your project should be so neat and descriptive such that if a new developer starts working on it, one should not encounter any problem in understanding the patht that the data follows to render the ui.

AmanAgarwal041

import { useEffect } from 'react';
import PropTypes from 'prop-types';

//  Animating Header

const noop = () => {};

const HeaderAnim = ({ onHide, onShow, active }) => {
	if (!active || !process.browser) {
		return null;