If you’re a frontend developer, you’ve probably dealt with the massive amount of bloat and boilerplate that can come with Redux. Setting up actions and reducers can lead to hundreds of line of code that relatively simple, but necessary.

Due to these problems, I switched over to using Recoil for a while, but then I remembered about Redux Toolkit.

What is Redux Toolkit

Redux Toolkit is:

The official, opinionated, batteries-included toolset for efficient Redux development

With a variety of utilities and a slightly opionated framework, it reduces the amount of fluff code you have to write to implement Redux.

Even better, it’s officially supported by the Redux team, which means it works just as well as Redux with half the code. …

We’ll skip the introductory BS and get straight into this guide. You can see the finished project in this Github repo. If you check the commit history, I’ve created commits for each “step” of this process.

Technologies

• Next.js — SSR React
• Eslint — Code style/formatting
• TypeScript — Typed version of JavaScript
• Jest — Component testing Library
• Enzyme — Testing utility for Jest
• Storybook — Component building tool

Setup Next.js and TypeScript

First, we’ll start by creating a new Next.js project with TypeScript. Open up your terminal and run:

yarn create next-app

Follow any prompts this tool gives you, and you should have an initialized Next.js …

React portals are a first-class method to render children into a DOM node that exists outside of the current parent. This is commonly used when you need a React component to visually “break out” of the current tree hierarchy. For example:

• Dialogs
• Modals
• Tooltips

In all these cases, you’re rendering elements outside of the normal location in the DOM tree.

Normally, when you return a component from the render method of a React component, it’s mounted in the DOM tree as the child of the nearest parent Node:

render() {
  // React mounts a new div and renders the children into it
  return (
    <div>      {this.props.children} …

Front-end developers catch a lot of slack, often the butt of many jokes, they are still in incredibly high demand across the software industry.

Frontend development as a field is constantly growing and changing. For example, the concept of Javascript frameworks like React or Vue didn’t event exist 10 years ago.

To stay on top of the game and be a great developer, regardless of the current hot technology stack, here’s some skills to master.

Responsive web design

The way people browse the internet today is 44% on mobile devices. This means that any implemented web design should take mobile into consideration just as much as desktop. …

React hooks, released in React v16.8, have changed the way developers write code. By default, React gives us access to a set of powerful base hooks, like useState , useEffect , useReducer , and others, but we can also build our own custom hooks to abstract complex state logic.

Wait, what are custom hooks?

When writing React applications, there’s bound to be instances where you find yourself using the same repetitive or redundant state logic across multiple components. With custom hooks, we can extract this logic into a function to make our code cleaner and more reusable.

Custom hooks are simply functions that encompass other hooks and contain a common stateful logic that can be reused in multiple components. These functions are prefixed with the word use . Custom hooks mean less keystrokes and DRYer code. …

Today’s world is tumultuous, complex, and distracting. Each day from the moment we wake up there are often hundreds of things that demand our attention, like reading the most recent breaking news report, watching that TV show everyone’s raving about, or talking to friends on social media.

Every single one of these distractions are tempting, who doesn’t want to be on top of the latest tech news? But they’re still distractions.

It’s almost universally recognized that most people have problems with saying no (check out this Psychology Today article from 2014), and it’s all rooted in our want to avoid conflict. Although saying “no” won’t cause a major war, it still creates some disharmony that our brains interpret as conflict. …

As we move into 2021, the way we develop and think about the web has radically changed. The further development of Progressive Web Apps (PWA’s), Artificial Intelligence/Machine Learning, expansion of the Internet of Things (IoT), Web Assembly, and more will shape the future of the web.

In this article, we’ll be looking at some of the up-and-coming technologies every technologist should be looking at for 2021.

React hooks were introduced in React v16.8, and made functional components incredibly powerful. With React hooks like useCallback , useEffect , and others (all of which I’ve written about), developers were equipped with the tools to turn React functional components into the building blocks of all React applications.

In this article, we’ll be looking at the React hook useRef and how we can use it to upgrade our React functional components.

What is useRef?

What exactly is the useRef hook?

const refContainer = useRef(initialValue);

useRef takes in a single function argument, initialValue , and returns a mutable reference object whose .current value is initialized to the passed argument. …