Forem: Shubam Bhasin

Lazy Load you React Components

Shubam Bhasin — Sat, 10 Jul 2021 15:52:28 +0000

Make your React websites load faster

What is Lazy Loading ?

Lazy loading in React is the technique that is used in optimizing out web and mobile apps.

How it Works ?

This technique uses a method that renders only very important or critical user components in the first, rather then loading the whole website at once and then rendering the non-essential components later.

As we write more and more code, as we write more and more components, the size of the application grows significantly bigger and it starts hindering the websites performance because now the bundle size has been increased. This makes the app look slow and chunky and hence directly lead to bad user experience.

So to avoid all the hiccups that I explained above Lazy loading is a Savior to avoid all this and has many other advantages.

There are a couple of benefits of lazy loading

Faster load times for apps/websites
Saving data or bandwidth
System resources are saved both on the client and server-side.

**Note: Loading all the components even when they have no use in the UI right now is wastage of bandwidth and resources. So its better if the content is asked/delivered only when required. Thats why Lazy loading makes sense.

I have my personal portfolio at Shubam Bhasin that uses Lazy loading, just have a look the the bundle size its so small that website loads up quickly.

Okay ! Enough talking lets write some code

Official Reference*: React Lazy Loading*

The React.lazy() function lets you render a dynamic import as a regular component.

e.g.,

Before Lazy()

import OtherComponent from './OtherComponent';

after Lazy()

const OtherComponent = React.lazy(() => import('./OtherComponent'));

You just have to add React.lazy() and then pass the import statement as a call back and half of it is done

Here is small little catch

All thee lazy components should be rendered in a Suspense component, which allows to show some regular react component before loading the lazy compoennt like a Loading screen etc

e.g.,

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

You can even wrap multiple lazy components with a single Suspense component, just like below

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

Sometimes it can happen that the component fails to load, then what ?

React.lazy do support error boundaries.

You can handle these errors to show a nice user experience and manage recovery with Error Boundaries. Once you’ve created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there’s a network error.

e.g.,

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);

This will lead to a better user experience.

This was Lazy loading in React 🔥🔥

See you lazy loading component in your apps/websites

Using styled-components with React

Shubam Bhasin — Fri, 09 Jul 2021 17:56:34 +0000

Well, we all love CSS, we all love JavaScript and we all love React. What if someone tells you that now you can create full-fledged Components ( e.g., a button, a navbar, a tile, etc ) while writing React code using CSS in a very easy handy way.

How does a styled component looks like ?

Just like this 👇

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`

And how do we use it? Is it even simple? Yes, you guessed it right,

// Writing this will give you a separate button component of the CSS properties 
//mentioned above
<Button>Big Button</Button>

Ain't it easy? Now you can use this button anywhere without writing any separate class or anything.

Let's dive a little deeper

Why Styled Components?

Automatic vendor prefixing: You can use standard CSS properties, and styled-components will add vendor prefixes should they be needed.
Unique class names: Styled components are independent of each other, and you do not have to worry about their names because the library handles that for you.
Elimination of dead styles: Styled components removes unused styles, even if they’re declared in your code.

Installation

It is super easy. You can do it through a CDN or with a package manager like yarn or npm…

for npm

// npm
npm I styled-components

with yarn

yarn add styled-components

Let's learn the syntax now

If I go a little precise, styled-components use Javascript's template literals to bridge the gap between components and the styles. So, technically when we write a styled component, we are actually writing React components with styles.

Let's see an example now.

import styled from "styled-components";

// Styled component named StyledButton
const OrangeButton = styled.button`
  background-color: orange;
  font-size: 1.5rem;
  color: white;
    border-radius: 5px;
`;

// nothing special here, works just like a normal react component.
const SomeReactComponents = () => return <OrangeButton> Login </OrangeButton>;

Now we know that whatever we write with styled components, in reality, is a React component. So a React component is definitely incomplete without props.

Yes we can use props with styled components 😍🔥🔥

Let's learn how to do that

For example, we need a button, but the button's color is coming from the database or it is dynamic or dependent on some other component, how will we use that in styled-components? Obviously using props.

import styled from "styled-components";

const DynamicButton = styled.button`

  font-size: 1.5rem;
  color: white;
    border-radius: 5px;
                                        //props                                                             
  background-color: ${props => props.bg === "red" ? "red" : "green";
`;

function SomeReactComponent() {
  return (
    <div>
      <DynamicButton bg="Red">Red button</DynamicButton>
      <DynamicButton bg="Green">Green button</DynamicButton>
    </div>
  )
}

So we pass a bg in props and if you pay a little attention ${props} is used because styled components use JavaScript's template literals.

Tip

We can keep styles in a separate file with export statements and just simply import them wherever we want to use them.

That's Styled components !!

Pros

Reusable – just as the normal React components, you can make small reusable pieces of code and avoid code duplication. Typical use cases are buttons, tables, forms, etc.
Writing pure CSS – оne of the biggest advantages of Styled components in comparison to other styling solutions in React. You don’t use weird syntax and write the CSS as a JavaScript object. Inside the template literals, you write SCSS or plain CSS.
Dynamic styling – Using props, you can have dynamic values, which gives you a high level of flexibility by avoiding writing duplicated styles.

Cons

The only con I see is while debugging something in chrome dev tools. We see weird class names and hence it is difficult to find what class is doing what. Other than this I find them super lit.

See you using styled components 😁

Vanilla CSS VS CSS Frameworks

Shubam Bhasin — Mon, 14 Jun 2021 16:39:41 +0000

If you are a beginner, someone who is just starting with web development. You must be exploring lots of resources from where you can learn building lots of awesome stuff. You may or may not have been adviced by your friends to start using Bootstrap, Material-UI, PureCSS etc etc. What are the perks of using them how you can quickly setup up everything with few lines of code. No doubt since you are a beginner you might start doing that. So,

⚠⚠Please stop ! Dont do that.

Behind the scenes

3 years ago when I started my journey in Web Development. This was something I was totally confused in, should I learn CSS from scratch or should I just learn small little basics and jump into those eye catching, luring CSS frameworks.
I was totally a noob in Web technologies ( although had decent knowledge of C, C++ ). Still it was difficult to choose. One one hand I had to learn the concepts like padding, margins, how to make a button beautiful and on the other hand **Bootstrap *was giving a small class
*"btn btn-success"** to create a awesome professional looking button like this:

<button class="btn btn-success">Beautiful button</button>

and the button I knew about looked like this

For obvious reasons I choose Bootstrap over vanilla CSS and now making a Navbar was a piece of cake, copy the boilerplate code from bootstrap website and get your work done 😁. Obviously I enjoyed building websites, components with such an ease but when it came to explaining stuff to other peoplem like how its done what is happening behind the scenes I almost knew nothing. I lacked basic understanding of things.

Thing I learned from this

Because I chose a framework directly, I lacked basic understanding of CSS
I was not even familiar with basic concepts of flex-box, grids, transitions etc.
I got over confident of the things I knew nothing about.
Obviously I regreted that decision later.

Fast forward 3 years. Now I dont need any framework to build anything, I can create thing from scratch. ( Yes I learnt everything from 0 again )

CSS Frameworks VS Vanilla CSS

Short answer

You might have heard about learning by doing, probably thats the case with CSS too, if you write your own styles without taking help from any framework surely you will learn it in a better way.
You have full control on the things happening on the page, because you wrote it in your way, no framework is interfering with padding, margins width etc. On the other hand:
CSS frameworks makes work faster
Boilerplate code keeps things at ease, if stuck you can refer documentation.

Long Answer:

Vanilla CSS

If you are a beginner basic under of CSS is very important. It is very much important to know what is happening on the page, how the content is flowing on the page, how the elements are adjusting themselves according to the space available, what is box model.

Frameworks don't teach you all of that.

As a beginner its okay to write a code that is not optimized. Its okay that your button doesn't look professional. All of that will come over time. So learn the basics first and most importantly dont get intimidated by looking at the code that a professional wrote. You will be writing that one day may be better. So basics first !!!!!!!

Pros of using Vanilla CSS

You know how things work, how padding works, what is box-sizing: border-box etc.
Control over all the styles.
Better customization.
You can put your design to reality.
You can take inspiration from a design and implement it.
You dont have to be dependent on someone else from changes in your styling.
You will learn the best coding practices while writing it.
You might learn new and better way of doing the same thing over time.
Will definitely help you become a better web developer over time

*Once you master your CSS skills you can infact create your own framework for you personel toy projects. Btw I have made one, you can check it at EaseCSS *

Cons of using CSS Frameworks
( if you directly jump into it)

You will lack basic understanding of CSS.
You have less control on colors, padding, margins etc.
If you copy boilerplate code, it can be bulky as it contains lot of unnecessary things that you actually dont need.
Lots of websites use these frameworks so things might look the same ( sometimes might look copied ).
Additionally, you might need to overwrite a lot of classes or use dirty tricks like !important to really achieve the style you want.
CSS frameworks need to be imported may be through a CDN and that might import the full package and will make the codebase look bulky, when all you require is may be just a button, a Navbar etc.
If you dont know whats happening under the hood, debugging can be really difficult.

CSS Frameworks

No doubt CSS frameworks are one of the best things that ever happened in the Web Development industry. It gave developers lot of flexibilty in writing code, and saved lot of their time. You may be working with an organization that uses a framework you are already familiar with so wont be a lot difficult to settle in there. So yes Frameworks do come in handy.

But there is a time only after which you should think of using them. Offocourse if you have come reading this long you already know it,

Only when you are cleared with the basic understanding of the concepts, basics things like flex-box, grids, box-model etc etc, then you can think of using frameworks.

Pros of using CSS frameworks

Saves lot of time in writing code just by declaring few classes. e.g.,

Vanilla css:

<button>Vanilla CSS</button>
.btn {
font-size: 1rem;
padding: 0.7rem 0.5rem;
margin: 0.5rem;
border-radius: 5px;
background-color: crimson;
}

Bootstrap:

<button class="btn btn-danger">CSS Framework</button>

you see it saves time.

Consistent styling across whole project
Production and shipping of project becomes faster
You don’t have to worry about tons of cross browser compatibility.
Easy to use, since lot of example code is given in the documentation website where you can refer if you get stuck.
You mostly dont have to worry about the optimized code.

Cons of Vanilla CSS

Styling can be inconsistent.
Code optimization could be a problem if you are a beginner.
Have to care lot about cross brower compatibility.
Production can be little slow, since you are writing code from scratch.

Frameworks are awesome no doubt. Vanilla CSS can be really messy sometimes and vice versa. But you should know when to use what and where to use what.

I hope know you got a fair understanding of both the worlds. Obviously there could be lot more arguments about both and the debate might never end but I tried to be as consise as possible.

Whatever I have missed you can always add that up in the comment section.

Drop a review it would be awesome !!!!!