I have created numerous bugs by using useEffect wrong, and I have learned the hard way how to solve them. As a result of my errors I have acquired a set of best practices I like to follow, and I like to share them with you. Happy reading!
“Premature optimization is the root of all evil” is an oft repeated adage, and rightly so. But what do we do when optimization is long overdue in our React apps? Let’s explore some tools and techniques to deal with exactly that.
Du har kanskje støtt på useRef og forwardRef før, men ikke helt fått koll på hva det dreier seg om. I denne korte artikkelen tar jeg vekk mystikken, og gir noen enkle, nyttige eksempler på hva de kan brukes til.
You might have encountered useRef and forwardRef before, but not quite grasped what they are about. In this short article, I remove the mystery and provide some simple, useful examples of what they can be used for.
In web development, designing an accessible loading button is a real head-scratcher. There's no easy one-size-fits-all solution, but understanding the various approaches improves your ability to make accessible experiences. So, how do we make a loading button accessible?
Have you ever felt frustrated managing the state of your application? Common challenges include unnecessary re-renders, prop-drilling, or a lot of boilerplate to manage even simple states. Jotai provides an elegant and simple solution to a lot of these challenges, building a easy, boilerplate-free and global state using atoms.
Det er lett å blande mellom kontrollerte og ukontrollerte komponenter i React, men hva er egentlig forskjellen og hvilken burde man bruke?
React server components vinner popularitet og det er avgjørende for komponentbiblioteker å støtte det for å holde tritt. Hvordan støtter du det?
React server components is winning popularity, and it's crucial for component libraries to support it to stay relevant. How do you support it?
During my time as a React developer, I have experienced that you never should mutate your state, as it leads to weird bugs when rendering your components. This article will show you some tricks on how to make your state immutable, achieving a more bug-free UI.
Norway is known for its fjords, glaciers and cold winters. The latter is suboptimal for cyclists, which is why we ended up creating dundring.com; a free and open source in-browser training application created to control and track your training with a smart bike trainer ⚡️ This article will go through the magical story of how our hobby project dundring.com was made 🎅
Har du sett React sin Suspense funksjonalitet og tenkt at det kunne vært noe for applikasjonen din? Bare for å få drømmene lettere lagt i grus når du etter nærmere studier ser at Suspense støttes i hovedsak av meta rammeverk som Next.js og Remix? I dagens juleluke ser vi på ulike måter å håndtere datalasting på, og hvordan vi kan forbedre både ytelse og kodekvalitet ved å ta i bruk TanStack Query og Suspense. Vi omgår metarammeverk begrensningen og ser på hvordan vi kan bruke Suspense i en tradisjonell klientside React applikasjon. Dette gjør vi ved å bruke JS biblioteket TanStack Query.
There are many ways to solve problems in React, some will say too many. In a large code base it is helpful if the developers are united about the way to maintain the code base. Take a look at the topics I present to you in this article, which one do you use and are you and your team on the same page?
Storybook tilbyr en rå, interaktiv playground for å teste ulike props, men det kommer med en pris: med det følger en tvangstrøye av et design. Ved å kombinere React Live og litt strengkonkatenering kan du lage en løsning du har full kontroll over, samtidig som du gir brukerne dine en effektiv måte å få oversikt over en komponents muligheter.
Storybook offers an awesome, interactive playground to test different props, but at a price: with it comes a straitjacket of a design. By combining React Live and some string concatenation, you can create a solution that you have full control over, while giving your users an efficient way to get an overview of a component's capabilities.
Code splitting and lazy loading can be synonymous with heartache and headache. Luckily, smart people have made tools to make it easier for us. Webpack and React Router are familiar to many in the React community. Add loadable-components to the mix, and you have all the ingredients for code splitting and lazy loading without the tears!
Enten du lager et bibliotek eller lager React-komponenter for din egen del, er det en teknikk du bør kjenne til: polymorfisme. Det er når én ting kan ta flere former, som når en knapp kan opptre som en lenke. Brukt riktig, kan det redde deg fra å vedlikeholde ulike varianter, samtidig som det kan gi brukerne fleksibiliteten de trenger fra komponenten. I denne teksten vil jeg vise deg hvordan du kan utnytte 2 av de mest kjente måtene å få til polymorfisme i React: “as”- og “asChild”- mønstrene.
Whether you're making a library or making React components for your own sake, there's one technique you must know: polymorphism. It's when one thing can be multiple shapes, as when a button can act as a link. Used correct, it can save you from maintaining many variants, and at the same time give your users the flexibility they need. In this text I will show you how to utilize two of the most known ways of implementing polymorphism in React: the "as"- and "asChild"-patterns.
Trenger du virkelig en native mobilapp?
Ahh, React. Min gode venn gjennom mange år. Jeg skal være ærlig: forholdet vårt starta litt turbulent. Jeg var usikker på om det å blande HTML inn i Javascripten egentlig var noen god idé. Det tok faktisk et par år før du klarte å overbevise meg! Men du var heldigvis tålmodig. For det som starta som en skepsis viste seg å etter hvert til å bli til en aldri så liten forelskelse! Ohh boy!
Nettsider med animasjon får litt personlighet, og det skal lite til for å oppnå det. Her er en guide til bruk av CSS-transitions.
Changing the state of your component based on the interaction of a user is a common scenario in a React application. Your first instinct may be to put the event logic in a useEffect that depends on some value to change so the effect can be triggered. But why put the event-specific logic some other place than event handlers? To avoid misbehavior in your application, put event logic in the event handlers and not in useEffects.
Updating view logic based on some state or props is a common thing to do in a React application, and the go-to method is typically by putting every state update in one or more useEffects. However, this will lead to unnecessary updates and unmaintainable code. Let's take a look at how updating view logic is better by doing it during render rather than useEffects.
Do you need help with the Javascript SDK for Application Insights? Look no further! This guide will help you go from zero to hero in no time 📈
Resetting state in a React application is a common thing to do. You get some new data in your props, and you want to set your state back to the initial values, and often it is done with useEffect. However, useEffects can be messy and hard to understand, and it's because you (and I) are using them wrong (🔥). Let's take a look at how to solve this in a better way by using the key attribute.
Do you need help with setting up a simple custom server in Next.js? This trick will get you a long way!
Det er leit å melde. Det er ikke lenger en god idé å rendre hele websiden din på klienten. En SPA er rett og slett ikke bra nok i 2022.
Want to be really, really type safe, both on the front and back ends? With Remix, that's the default!
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?
With React 18, a new hook is available which can slow down our UI on purpose 🤯 Why may we need such a hook? 🤔
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
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.
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 🎅
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!
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.
The internal link abstraction with Next.js less than perfect. Let's create a better one!
Learn how to easily build your own Tool Plugins to customize Sanity.
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.
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!
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!
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.
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!
🎶 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.
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?
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!
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.
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.
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!
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.
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!
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!
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!
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.
A brief introduction to Reanimated 2's worklet directive and how it can help us animate our apps.
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!
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?
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.
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?
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.
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.
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.
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!
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.
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.
Testing your apps is becoming so easy, it's starting to become worth the trouble!
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?
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.
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.
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.
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.
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.
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.
A quick and easy guide to creating components that control their own state, if you want them to.
What is lazy loading, and why should you do it?
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?
Content management done the right way 🤷♂️
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.
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!
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.
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!
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.
Hooks change everything, let's explore some fun patterns!
Most React apps use JSX - but how can you set up a JSX environment yourself?
React is Just Components ™️ - but there are tons of ways to make them. Let's dive in!
Animations are awesome. Make sure they are as smooth as they can.
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
Server-side rendering of your frontend application can be indispensable for some cases, but... is it worth the effort?
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?
A festive introduction to Hooks, and what you can do with them!
Let’s take a quick look at what it takes to introduce typescript to your react-webpack applications and how you can get started.
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.
Let's deal with those pesky errors once and for all
How to use Reactrotron to really improve your React and React Native development
I needed one for this site - follow along if you want one too!
I've spent the last year helping build a design system. These are some of the things I learned along the way
Do you need to create a complex, yet reusable piece of UI? What's the best approach?
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.
Is your React app accessible to all of your users?
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?
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.
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!
Almost every application you write contains state and you'll need some way to manage it, but how?
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?
Is this the last reducer you'll ever write?
Documenting your project can be a pain in the ass and is often neglected. Docusaurus removes the pain of maintaining documentation.
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.
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.
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.
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!
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!
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.
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!
Although not React specific, this technique has made our React code much simpler and easier to read. Say hello to class property initializers!
In React, there are two types of components - functional and class-based. What's the difference and when should you use each one?
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!
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!
Routing is usually one of the hardest parts of any web application. In React, however, they're not really anything different than regular components!
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!
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!
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?
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!
React 16 brought us a way to handle errors in a neat, declarative way
Sharing code between components can be made much more declarative and reusable than utility functions
Fragments lets you return several root nodes from your components. Finally we can skip those pesky container divs!
Writing great, readable, accessible and well-formatted code used to take years to learn. Now there are tools to help you get there faster!
Although we hear a lot about MobX, Redux and other tools for handling state, React ships with its very own.
Structuring your React app is incredibly important for making your project maintainable and easy to navigate. What is the best way to do it?
Avoiding bugs in your code is important for the end user experience. Choosing the right way to test your code is paramount!
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.