React

6 min readReact

React Context might not be the right solution for your app

Contexts in React are great. They provide an easy solution for shared component state, avoiding prop drilling and many other common patterns. All that while being built into React itself. What is not to like about that, and when should we reach for other solutions?

3 min readReact

useDeferredValue in React 18

With React 18, a new hook is available which can slow down our UI on purpose 🤯 Why may we need such a hook? 🤔

6 min readReact

Subscription pattern with Compound components in React

Compound component is a react design pattern popular in UI libraries such as Chakra, Reach, Semantic and Material. It allows us to write a declarative and flexible API for complex components that implicitly share a state. Today we'll look at an introduction and a slightly more complex example of the patthern

5 min readReact

Something about lock files

We've all been there: we created our first react project and was introduced to the lock file. Some took the time to understand it whereas others was scared of it and instinctively added it to the .gitignore file. This post will give a short description of the lock file, how we should treat it and use it correctly.

6 min readReact

Communication with Bluetooth devices using React and TypeScript

Bluetooth is a technology that you might use every day; This could be wireless headphones, game controllers or heart rate monitors, which all use Bluetooth. Until recently, I imagined technology like this required implementation of low level drives in C, but oh'boy, was I wrong! Thanks to Web Bluetooth, it is now possible to communicate with Bluetooth peripherals through the browser with JavaScript! We will explore how we can create a web app using React, TypeScript and Web Bluetooth to control our favourite smart lights to make our home ready for Christmas 🎅

3 min readReact

Implementing unfurling URLs in Sanity

Want to add those nice-looking link previews you get when you share a link on Medium or Twitter? Then this article is for you!

3 min readReact

Joyful onboarding with React Joyride

Have you ever had some new functionality that you would like to showcase for your users? Perhaps your userbase is not the most tech-savvy and they need some guiding when new features are shipped. React Joyride let's you easily create guided tours that your users will enjoy.

2 min readReact

Create a useful link abstraction in Next.js

The internal link abstraction with Next.js less than perfect. Let's create a better one!

4 min readReact, JavaScript

Building Tool Plugins for Sanity Studio

Learn how to easily build your own Tool Plugins to customize Sanity.

6 min readReact

Storybook: background change on prop change

Tired of manually changing the backgrounds in Storybook whenever you change the color theme of your component? With a few lines of code, storybook can automatically change the background color whenever certain props on your component change.

3 min readReact

How to lazy render large data tables to up performance

When working with large tables with many rows and columns you might find that your application is starting to lag. Especially if your table has a lot of custom styles, clickable rows or sortable columns, rendering can become an issue. In this post I'll show you how you can lazy render your table to make it fast and snappy!

6 min readReact

Inside the React Core team

4 min readReact

Deck the Halls With React Three Fiber

Earlier this year I tried using three.js within a React app. It wasn't straightforward, and I ran into quite a few problems. Since then, I've been eager to try out this library a co-worker told me about: react-three-fiber. Apparently, it could solve all my problems (ok, maybe only a few) and make it super easy to create cool animations with few lines of code. Say no more!

4 min readReact

Create a generic table with React and Typescript

When I first started out with Typescript I found it very difficult to create the correct types when making generic components. In this article we will create a generic Table component that can be used with any set of objects.

4 min readReact

/** Make the nice list with JSDoc */

Documenting stuff is important, folks! Where would Santa be without his naughty and nice list? Let's spend a few minutes learning how you can improve the user experience of your components by adding a slash and a couple of stars in front of it!

7 min readReact

4 steps for the getting your React code ready for Christmas

🎶 It's beginning to look at lot like Christmas...🎶 You have put up your favorite decorations, candle lights are sparkling in the windows and Christmas cookies are baking in the oven making a nostalgic scent. You can almost feel the Christmas spirit. But, wait a minute, what's that ruining this perfect Christmas feeling? Is it dirty react code?! There are “this”, a looong render method and even “classes” all over the place. With only four days left it's probably time to do some proper refactoring of your react code. Here are four steps which I have recognized to help me get going. It's time to roll up your sleeves.

3 min readReact

How to force-refresh your app every once in a while

7 min readReact

Rebuild static pages on-demand with incremental static regeneration

Building static pages with React is a great way to improve the experience of a website. But how do they work, and how can you still get the static pages to change when your data changes?

4 min readReact

A Tale of a React Newbie

My name is Tora, and I started working at Bekk this fall as a new React developer with a fresh Computer Science degree. I would like to share my journey into this new and exciting world with you!

3 min readReact

Maintainable React components with Typescript

I often find myself coming into code bases that I haven't worked with before to fix a bug or add some new feature. This is honestly more often that not quite challenging.

3 min readReact

Making sounds with React and Tone.js

By utilizing Tone.js one could easily produce some sounds, and if you’re lucky it could be quite musical. In this article we’ll look at combining React with Tone.js to make a simple sequencer.

3 min readReact

Reusing existing JavaScript-code in your React app

A couple of years ago, a colleague and I created a small JavaScript application to toy around with some image processing techniques. I really enjoyed the project, and the other day I decided put the same functionality in my new React code. One way of doing this would be to rewrite the whole thing, and to be honest, it probably would not have been that much work. But it got me thinking, how would I go about injecting the already written code into my React application? I haven't done anything like this before, and if you haven't either, this is a blog post for you!

4 min readReact

A Hot Chocolate Map with React Leaflet and TypeScript

For the last decade I've called Oslo my home. And aside from the usual goals of getting an education, landing a job and living my life, I've had a side quest: Finding the best places for hot chocolate in town.

11 min readReact

Creating a Chrome Extension with React and TypeScript

Did you know most Chrome extensions are written in good ol' JavaScript? Turns out, creating one with React is pretty straight forward, too! Let's look at how you can use your existing JavaScript skills to spread some holiday cheer!

5 min readReact

Back to basics - Setting up a minimal React project from scratch

It's so easy nowadays to get a web application up and running in just a couple of minutes. We've got tools like Create-react-app, React boilerplate, Slingshot etc., which let developers set up and prototype anything blazing fast. These tools come with Webpack, Babel and more already configured for you, so you don't have to know anything about them or what they are used for. This is obviously very valuable and cost-effective, but we also have to remember to keep in touch with our roots and get some sense of what is going on under the hood. So for today's topic we will be going back to the basics and see how we can set up most of what we need from scratch!

4 min readReact

Recoil.js - State management for React 🔥

4 min readReact

Validate Your Parking

He couldn't believe it. This certainly couldn't be true. Someone else must have made a mistake here. He read the email a second time. Maybe he missed something and the whole thing was just a big misunderstanding? But he didn't, of course. He is the kind of person who always pays attention to typos, therefore reading it again was quite pointless. Anger started spreading through him. How dare they? It felt so incredibly stupid and unfair. Especially considering he was such a law-abiding citizen. He despised those who didn't follow rules. They couldn't possibly mean that he was one of them? Yet this is exactly what the email was saying: "We can inform you that you unfortunately have used the wrong licence plate in the app, which is why you have been given a fine. In this case the fine is issued on AB12345, while parking was activated for AB1234 in the app.". Filled with rage, he locked his phone and shoved it back into his pocket. He missed one bloody number!

8 min readReact

10,000 Commits Later - Switching to React Native in 2017

Back in 2017, my team were working on a feature-packed, widely used mobile app with a legacy codebase. The app had way too much logic, logic of the complex sort, with loads of very old code calling old APIs. Build times were terrible. Noone had a complete understanding of the code.

3 min readReact

What and why and how are worklets in Reanimated 2?

A brief introduction to Reanimated 2's worklet directive and how it can help us animate our apps.

6 min readReact

React Testing Library

Do you feel compelled to manually test your React frontend after each deploy, because it’s not tested as well as your backend? Or perhaps you already have frontend tests, but you feel that they only serve as a hindrance, slowing down your development speed? Perhaps it’s time to give frontend testing another go, with the React Testing Library!

4 min readReact

Module Federation: Micro-frontends with webpack 5

In this article, we will look at one of webpack's exciting new features, Module Federation. This feature will allow dynamic code reloading from another project at runtime. Using module federation will enable sharing code from other projects with only a little tweaking in your webpack config. It can make a website consisting of multiple frontend applications appear as one seamless SPA. Neat, huh?

6 min readReact

Intelligent fetching and caching with SWR

Every now and then, a library surfaces that change the way you're used to thinking. In this case, it is rethinking the data flow in your React app. SWR provides a complex data store with a simple interface, helping you write simple patterns with less code.

7 min readReact

🎶On the third day of christmas a developer sent to me.. 3 React security tips!

As frontend developers, our focus is on the users experience in our application. How fast and efficient the application is and how smooth the functionality can be. We all might say security on our minds, but we often rely on somebody else to handle this. Luckily, modern web frameworks, like React, come with built-in security against one of the dangers of the web – Cross Site Scripting (XSS) attacks. But what does React actually defend us from and more importantly what does it not?

9 min readReact

War stories: The move from Flow to TypeScript

8 developers, 1240 files, 102 665 lines of code. This is the story of how we translated our entire codebase from Flow to TypeScript and lived to tell the tale.

8 min readReact

Seven Interesting Things About React Native

React Native is a React framework developed by Facebook to write code for mobile applications. In this article I will share some things I found interesting over the years working with this technology.

7 min readReact

What are the React Team Principles?

7 min readReact

Two Applications, One Repository

When you’re developing similar apps for the web and native platforms, it's hard to find a project structure that works well. Let's take a look at how our team is approaching this challenge for maintaining different view layers, while sharing most of the business logic.

7 min readReact

How I structure my React code

If you're looking for the definite answer to how you should structure you React apps, this article probably isn't for you. If you're interested in seeing how it can be done - read on!

2 min readReact

Some neat things to know when working with React and TypeScript

I started working with React and TypeScript about six months ago. Since then I’ve learned a lot, and there are a few things I wish I knew when I started out that would have saved me from messy solutions and some frustrating moments. Here are the ones I think are the most useful.

4 min readReact

A recipe for toasts

4 min readReact

Setup Azure Serverless Functions in 6 Simple Steps

React is no fun without some data to display or APIs to connect to. Let's dive in to how you can set up some serverless functions for all those times you wished you had a backend.

5 min readReact

How I test my React apps in 2019

Testing your apps is becoming so easy, it's starting to become worth the trouble!

3 min readReact

Why (not) make a design system?

Design is complex - and ever increasingly so. It requires full collaboration between all teams and professions involved in the process. A shared design language makes teams work together more effectively. That’s why companies invest in design systems. But how can we make sure that it works for our product and improves our productivity?

5 min readReact

Document your stuff with Docz

Having great documentation is what differentiates a great library from an ok one. I've spent the last couple of months creating a design system and its documentation site in Docz, and I'd like to share some experiences.

2 min readReact

Micro animations to the rescue

People like to understand what's happening around them, whether it's in real life or in an app on their phone. Let us have a little peak into how we can help users of our React Native app.

4 min readReact

5 things I have learned in my first months as a React Native developer

Hi, my name is Marte and I decided five montsh ago that I wanted to pursue a career within front-end development to get closer to the products and users. At that point in time I was working with strategy and business development, which I also studied for six years. The journey that has led me from being a management consultant to a developer has been filled with confusion, feeling of achievement, stupid questions, not so stupid questions, bad code and good code. And it is true what they say; the learning curve is steep! I will take you through some of the learnings I have encountered during my first months as a developer.

2 min readReact

Home-baked Hooks

About a year ago, Sophie Alpert and Dan Abramov presented one of the most exciting new features in React: Hooks. Release 16.8 introduced several alternatives that can be used directly (e.g. useState, useEffect and some others), but also provided the possibility to create your very own hooks – Custom Hooks.

3 min readReact

Fancy charts with Victory

Say you want to add a nice chart or other form of data visualization to your React app, but don't have the slightest idea of where to start. Do you write it from scratch, or do you utilize one of the many charting libraries out there? You might begin by researching d3 since it's one of the most popular data viz libraries for javascript, but you quickly get overwhelmed by the myriads of customization options and the steep learning curve. You probably don't even need all the bells and whistles that come included with it. My advice? Take a look at one of the slickest and most enjoyable charting libraries you're likely to come across this christmas - Victory.

4 min readReact

Working with Azure Application Insights in your React app

Do you really know how your users are interacting with your application? Have they tried out the latest feature you just deployed to production? Examining your user’s behaviour and interaction can be tremendously useful - figuring out where they incur problems or halt a purchase, where in the onboarding process most people fall off, how long time they spend on certain pages, or even just where on the site they’re located, are all valuable information for the further improvement and development of your website.

3 min readReact

Control your components

A quick and easy guide to creating components that control their own state, if you want them to.

5 min readReact

Test your applications in production

4 min readReact

Optimize your app by being Lazy

What is lazy loading, and why should you do it?

7 min readReact

Manage Global State with Context API and Hooks

For quite some time, Redux has been React developers go-to library for managing their app’s global state. It’s a great tool – but do you really need it?

3 min readReact

Managing content with Sanity

Content management done the right way 🤷‍♂️

6 min readReact

Can you feel the Suspense?!

Suspense is and will become a game changer when it comes to data fetching. It changes the way we structure our code, think about loading states and gives a better experience for both the developers and the users' interface.

5 min readReact

Oh, the Suspense!

The American dictionary states that suspense means a feeling of excitement while waiting for something uncertain to happen. So, let’s get excited and learn about React.Suspense and how this helps us wait for something uncertain!

4 min readReact

Get started with animations in React

Have you never been able to make that menu appear in the awesome way you've always wanted? Perhaps you've got lots of experience making things move with CSS animations, but you want to learn how (or if) a modern animations library could make your life easier? Or perhaps you just want to have fun and see how easy it is to animate elements in React using Framer Motion? Then read on! This article won't give you all the answers, but hopefully it will help you getting started.

5 min readReact

Stop... Render Time!

The promise of Concurrent Mode was made at a conference in 2018. The React team claim that this famous new feature would help with the issues with rendering, allowing to pause the render when the need to do more important tasks should occur. Let's take a closer look!

3 min readReact

How to avoid React's "Naughty List"

Every year, Santa Claus and his helping elves create a special list for every child in the world: the Naughty or Nice list. React has something quite similar – Strict Mode.

5 min readReact

Hooked on React

Hooks change everything, let's explore some fun patterns!

3 min readReact

Do you even JSX bro?

Most React apps use JSX - but how can you set up a JSX environment yourself?

4 min readReact

How to create components

React is Just Components ™️ - but there are tons of ways to make them. Let's dive in!

3 min readReact

useNativeDriving with React Native

Animations are awesome. Make sure they are as smooth as they can.

3 min readReact

How to CSS in React

A hot topic these days, and I don't think we'll ever agree, but here are some ways to do CSS in your React app

4 min readReact

Server-side rendering

Server-side rendering of your frontend application can be indispensable for some cases, but... is it worth the effort?

5 min readReact

How to use SVGs in React

SVGs are here to stay, and React seems to be sticking around for a while as well. So how do you go about combining them?

3 min readReact

Ho Ho Hooks

A festive introduction to Hooks, and what you can do with them!

2 min readReact

Introducing Typescript to your React / Webpack apps

Let’s take a quick look at what it takes to introduce typescript to your react-webpack applications and how you can get started.

3 min readReact

Three different ways to use Context

Prop drilling can be a good thing, and it can be a bad thing. Thankfully, there are better ways to do it with the Context API.

3 min readReact

Error Handling in React

Let's deal with those pesky errors once and for all

3 min readReact

Supercharge your logging and debugging

How to use Reactrotron to really improve your React and React Native development

2 min readReact

Creating a progressive image loader

I needed one for this site - follow along if you want one too!

5 min readReact

5 tips for reusable components

I've spent the last year helping build a design system. These are some of the things I learned along the way

4 min readReact

Creating composite components

Do you need to create a complex, yet reusable piece of UI? What's the best approach?

3 min readReact

Introduction to memoization

Today we’re going to talk a little bit about memoization. And no, that’s not a spelling error. And even better, is sounds a lot more complicated than it really is.

3 min readReact

Accessibility in React

Is your React app accessible to all of your users?

3 min readReact

Let´s fetch some data

You have begun building your React application. Maybe you even have set it up with Redux. Now you need some content - but how do you fetch it?

2 min readReact

Introducing Typescript to your Redux code

By introducing Typescript to your Redux code and implementing it properly, Typescript can help you write better and less error prone code. In this article we will take a look at a simple Redux example and explore the benefits of introducing Typescript.

1 min readReact

Testing of React component with a real Redux store

Do you avoid testing of components that depend on Redux because you fear the complexity? Are you loosing sleep worrying about configuring huge mock stores for testing the simplest of components? Fear no moarrr!

3 min readReact

Handling component state

Almost every application you write contains state and you'll need some way to manage it, but how?

2 min readReact

Why is this so hard?

I've lost count of the number of times I forgot to bind this. Why do we need to bind this and how should we do it?

3 min readReact

Handling metadata in Redux

Is this the last reducer you'll ever write?

3 min readReact

Documentation with Docusaurus

Documenting your project can be a pain in the ass and is often neglected. Docusaurus removes the pain of maintaining documentation.

2 min readReact

Merry Christmas!

Christmas Eve is finally here, and many of you will hopefully sit down and share a meal with friends and family. This final post is dedicated to those who share - albeit in a different way.

4 min readReact

Some cool React tips and tricks

After spending some time with React, I've learned a few nice tips and tricks to make your app as composable, declarative and maintainable as possible.

7 min readReact

The definite guide to lifecycle events!

If you've been using React for any period of time, you've probably seen what React calls lifecycle methods. This article will give you a firm grip on when you want to use what.

4 min readReact

Below the surface

React is an amazing tool for many reasons. One of them is that it just works. Ever wondered about how exactly? Let's dive in for a quick look!

3 min readReact

Understanding Webpack and Babel

Most apps require some kind of build pipeline to bundle your application into downloadable files. This article will give you a very simple overview over how to get started!

4 min readReact

Boost your performance!

You can write some pretty fast and amazing apps with React without thinking twice about performance optimizations. However, there are some pretty cool tricks you can do whenever your app starts to slow down.

3 min readReact

A bit about context

Context is one of those features of React you rarely need to use - but understanding what it is and how it works makes you a much better developer!

3 min readReact

Class property initializers

Although not React specific, this technique has made our React code much simpler and easier to read. Say hello to class property initializers!

4 min readReact

Functional vs class components

In React, there are two types of components - functional and class-based. What's the difference and when should you use each one?

2 min readReact

Documenting your components

If you're writing components that are shared between different teams, or even different developers, documenting your components is a must. And it's crazy simple!

4 min readReact

Check out type checking!

JavaScript is a dynamically typed language. That means you don't have types to help you secure your apps from stupid bugs. Here's a few ways to avoid just that in your React apps!

3 min readReact

An intro to routing in React

Routing is usually one of the hardest parts of any web application. In React, however, they're not really anything different than regular components!

3 min readReact

Split your app into pieces!

With the rise of single page applications, we also got megabyte-sized bundles of JavaScript code to download and compile before we could show anything to the user. THIS ENDS NOW!

2 min readReact

Component libraries

If you're in a rush to get something production ready, you might not have the time or resources to create your own component library. Luckily, there are several pre-made ones to choose from!

3 min readReact

What is this JSX business?

One of the weirdest things to me when I started learning React was this JSX syntax. What is it? Where does it come from? And how can I make really cool stuff with this?

4 min readReact

Introducing CSS-in-JS

React did something pretty radical when introducing JSX - suddenly we were blending our logic and structure in the same file. Now, the time has come to include CSS as well!

1 min readReact

Add error boundaries to your app!

React 16 brought us a way to handle errors in a neat, declarative way

3 min readReact

Share logic between components!

Sharing code between components can be made much more declarative and reusable than utility functions

2 min readReact

Fragments, finally!

Fragments lets you return several root nodes from your components. Finally we can skip those pesky container divs!

3 min readReact

Write quality code

Writing great, readable, accessible and well-formatted code used to take years to learn. Now there are tools to help you get there faster!

3 min readReact

The mysteries of setState

Although we hear a lot about MobX, Redux and other tools for handling state, React ships with its very own.

3 min readReact

Structuring your application

Structuring your React app is incredibly important for making your project maintainable and easy to navigate. What is the best way to do it?

2 min readReact

Testing your code

Avoiding bugs in your code is important for the end user experience. Choosing the right way to test your code is paramount!

2 min readReact

Get started with create-react-app

Creating your first React app usually starts off with a 30 minute crash course with Webpack, Babel and a whole lot of stuff not remotely related to React. That all changed with create-react-app.