TL;DR:
The redux style guide has an important rule: “Connect More Components to Read Data from the Store”. This rule has some important performance aspects that are covered with an example in this post.
The “Container/Presentational” Pattern used to be the best practice when using redux or any other store management package.
It was explained thoroughly by Dan Abramov and Michael Chan.
If we want to keep it short, a container usually holds the data fetching logic and data access to store. On the other hand, a presentational component is more generic and just present the data it gets as props.
This…
TLDR:
The Cookie Store API is a new browser API built to expose cookies to service worker and offer an asynchronous alternative to document.cookie. It’s available in Chrome Browser starting from version 87.
Are you sick and tired of weird ways to get cookies fromdocument.cookie ? Hate it that you don’t know whether the cookie you set was actually saved or not? Introducing: Cookie Store API, available on Chrome version 87!
Motivation
We all use HTTP Cookies almost daily, but working with them was never an easy task.
The cookies interface is overly complexed and contains performance issues. Saving all of…
TL;DR:
Scheduling is a mechanism introduced lately by the React team to manage and prioritise tasks in the browser. It has become a case study for Google Chrome Dev team, to create a “Main Thread Scheduling” API.
This is groundbreaking work done by both of the teams. In this article I’ll talk about the APIs, how to use them, and how they will make a difference for our users!
If you were a part of the Frontend community for the past year and a half, the term “Concurrent” appears in almost every second tweet.
It all started with Dan Abramov’s…
Browsing multiple projects, I encountered a recurring pattern when trying to write a custom render for components that use Providers (React-Redux’s Provider, React-Intl’s IntlProvider for example).
This pattern usually looks like this:
This function is nice. It creates a utility that lets us call it whenever we want to test a connected component. The only problem is, it’s limited and causes an inconsistent behavior.
Usually, our app will work with several Providers, not only one, and this solution becomes squeaky when we try to add more Providers to it.
Another thing is that using it will cause inconsistency since we will…
TL;DR — StrictMode is a feature added in version 16.3 and aimed to help us in finding potential problems in an application, at the moment especially for Concurrent-Mode which is React’s ability to concurrently render, suspend, and resume rendering trees in the background while remaining interactive.
Last month on twitter, I encountered a tweet by Sebastian Markbåge a React core team member asking developers if their app is running in <StrictMode>:
The results blew my mind, 70% of us aren’t using it and never tried it!
At the moment, StrictMode helps us adapt our app to ⚡ Concurrent React ⚡ (Will…
React as we all know it, is changing. As a frontend developer with React experience for the past 3 years, selling me these changes was quite hard.
I’m here today as the seller and not as the buyer, hoping I will catch you in the fever I got once I understood what’s behind all these changes :)
After the React team announced Hooks, and pushed functional components as a “solution for all our problems”, this thought ran in my head, why should we use React’s defaultProps and not ES6 Default values for functional components? …
I’ve been interviewing for a while now and right after my first session of interviews with some candidates, I came to an epiphany, I’m doing this all wrong.
I decided to map out my desired skill set.
Some of them are “soft” skills that can be seen in an interview, and some are technical that can be tested or sometimes even asked in an interview. I’m here to share my thoughts on what is a good developer in my eyes. Keep in mind, these are my thoughts, it can be subjective.
Passion
Neil deGrasse Tyson said: “Passion is what gets you…
After my last post, I came to realize that while coding, I only use the tip of the iceberg when it comes to ECMAScript’s functionality.
So I decided to go on a journey and find out what’s new, what’s already implemented and what’s next.
Before we start the journey, let me just do a quick review over the TC39 process for ECMAScript features.
TC39
Technical Committee 39 is the committee responsible for evolving JavaScript; its members are companies.
The TC39 process is the solution to a main problem that occurred in 2015 when trying to release ES2015.
As ES2015 was built from…
Yesterday I had a nightmare about a problem I bumped into while coding my new project.
While searching for a solution, I couldn’t find a package that could help me. I woke up all sweaty, breathing heavily with tears.
After the last few projects I worked on, I realized something about us developers. We always seek the easiest way to do something; its in our nature.
While this helps us be efficient in a fast-moving industry, it does have its pitfalls.
The main one can be seen in day to day coding.
These days, almost every problem has a solution. The npm…
