• Automatic critical CSS — No unnecessary code on your page, only renders the CSS when the components are injected into a page
• Dynamic styling — It adapts the styling of a component based on the props
• Supports Global CSS
• Supports Server Side Rendering (SSR)
• Automatic vendor prefixes
• Unique class names, that means no class names bugs

I use styled-system to pair with styled-components. It makes the Component Orient Design lifestyle easy 😊 The style functions API of the styled-system exposes powerful props and with that leverage, it makes the styled-components even more powerful 💪 and we can use those props…

People assume that being in any industry for more than a few years one should know just about everything. That’s so not true! In this post, I am listing out the things which I’m not aware of or currently learning.

List of things I don’t know:

• Unix commands and bash — I can manage with ls, cd and the world-famous rm -rf Can manage with grep but for everything else, I’ve to lookup.
• CSS Methodologies — No BEMs, No OOCSS. I can do plain CSS. Currently using Tailwind CSS or styled-components. CSS-in-JS is the one I’m rocking now🤘
• TypeScript — Type checking in JavaScript is not…

Hooks were a new addition in the release of React 16.8. They let you use state and other React features without writing a class component.

The useEffect hook lets you perform side effects in function components

The useEffect hook is the Jack of all trades 👑 of the hooks. It’s the combination of componentDidMount, componentDidUpdate and componentWillUnmount. It's used for fetching the data when a component mounts, execute stuff when state or props change, Clean up stuff when the component unmounts. This useEffect hook can be really confusing 💡 until you understand or know how it works.

In this article…

Gatsby offers out of the box support to write the content in markdown and create pages easily in your app and with the leverage of many Gatsby Plugins, we can do many things like format code snippets, lazy load images, generating an RSS feed, creating a Sitemap, making SEO easier and a lot more 🥳

Writing a blog post in markdown is easier, no need to worry about styling, # makes H1, ## makes H2, the normal text makes a paragraph, adding links, images and so on.

But how to style the markdown content when the pages are generated, the…

GitHub Pages is a website holder for you & your projects. You can host your code directly from your GitHub repo. This article will help you how to manage your app in the master branch and deploy the code in the gh-pages branch easily.

You can choose any front-end framework like React, Vue, Gatsby, Next, Nuxt, Gridsome, and build the app in the master branch and build the code using the npm run build command and host directly using the gh-pages branch.

The quickest way to put your app to GitHub Pages is by using a package — gh-pages.

npm…

Write about your experience, learnings about JavaScript 💛. JSE will provide a home for your article 🥳

Submit your work

If you’re interested in writing for a publication, please get in touch by sending an email to Chetan at jsessentials3@gmail.com with your name and your Medium username and I will add you as a writer or you can send a DM on Instagram as well.

How to write articles

1. Reading time: minimum 3 minutes
2. Add a cover image
3. Title & Subtitle
4. Emojis 🥳😂
5. Recommend to use Grammarly.
6. Tag: JavaScript Essentials

Add this image at the end of the article with the caption

Recoil works and thinks like React.

Definition

Recoil is an experimental state management system for React by Facebook. It offers several out of the box abilities which are difficult to achieve with React ⚛️ alone.

Recoil lets you create a data-flow graph that flows from atoms through selectors and down into your React components.

Advantages

Recoil helps you eliminate the unnecessary re-renders which happens while using the Context API or Redux.

Consider a scenario where an app is using the Context API when the state in the context is changed, all the components in which even the data is not changed will…

Definition

The optional chaining operator ?. permits reading the value of a property located deep within a chain of connected objects.

Optional chaining was introduced as part of the ES2020 standard.

Why this?

It changes the way we access the properties from the deep objects. Optional chaining makes your code look cleaner.

Consider this piece of code, where the data object has a query and an answer to the query.

To access the value, you have to write a long conditional statement which is difficult to read and format 😢

But with optional chaining, you can access the value easily 😃 and you…