Issue #3 - Understanding event loops in JavaScript, future of CSS-in-JS, refs in React and a lightweight Tooltip API

Find out how event loops in JavaScript work, how React.useRef works and how it is different yet similar to React.useState, are Styled Components actually worth it and grease your React skills with an interesting quiz.

Tip of the day

You can use placeholder commas in the beginning to skip elements while destructuring an array. For instance you want to create a new array skipping the first two elements of another array, you can do it like this -

const superheroes = ['Hawkeye', 'Black widow', 'Thor', 'Wanda', 'Hulk', 'Iron man'];
const [, , ...awesomeHeroes] = superheroes;

console.log(awesomeHeroes);
// > ['Thor', 'Wanda', 'Hulk', 'Iron man'];

Articles

Why I moved from styled-components to Tailwind CSS and what’s the future of CSS-in-JS?

Explore with Ido why he had to migrate from using styled-components to Tailwind CSS for daily.dev despite him considering the former as having a better DX, and what does the future hold for such CSS-in-JS libraries. Fun fact - Scriptified is also built with Tailwind CSS.

by Ido Shamun

The Complete Guide to useRef() and Refs in React

In this guide, Dmitri explains how React.useRef works, how it is different from React.useState and the use cases where useRef can come in handy with examples.

by Dmitri Pavlutin

Tools

react-laag

It is a simple and ligthweight library, that provides hooks for tooltip and popovers. It also gives you a really comprehensive API which gives you full control over the look and feel.

by Erik Verweij

Phosphor Icons

A free and open-source icon family for interfaces, diagrams and presentations. Easy to pick up and plug in. Truly consistent in style and scale. Flexible to multiple sizes and weights.

by Helena Zhang, Toby Fried

Dev of the Week

Neha Sharma

Neha has 10+ years of experience in Front-end domain & currently working as Software development Manager at Tesco. She is an active speaker & advocate of web accessibility and have given several talks at meetups & conferences on accessibility. She also founded JSLovers dev community & writes about accessibility at a11ytips.dev.

Website | GitHub | Twitter | LinkedIn

Tech Talks

What the heck is the event loop anyway?

With some handy visualisations, and fun hacks, let’s get an intuitive understanding of what happens when JavaScript runs in this fantastinc talk by Philip Roberts.

Quiz

What is wrong with the below code snippet?

// Assume this is some heavy component with some heavy tree
// Hence this component is memoized to avoid unnecessary re-renders
const SomeHeavyComponent = React.memo(
  ({ children }) =&gt; <div>{children}</div>
);

const SomeComponent = () =&gt; {
  const [count, setCount] = React.useState(0);
  return (
    <div>
<someheavycomponent>
<span>Header</span>
</someheavycomponent>

      Count: {count}

      <button =="" onclick="{()" type="button"> setCount(currentCount =&gt; currentCount + 1)}
      &gt;
        Increment count
      </button>
</div>
  );
};

This week in GIF

Liked this issue? Share on Twitter or read previous issues.