Innhold om React
Totalt 148 innlegg
Side 3 av 10
Put event logic in event handlers in React
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.
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.
Compute view logic during render in React
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.
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.
Azure Application Insights using Javascript SDK in Next.js
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 📈
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 📈
Use key to reset state in React
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.
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.
How to create a simple Custom Server in Next.js
Do you need help with setting up a simple custom server in Next.js? This trick will get you a long way!
Do you need help with setting up a simple custom server in Next.js? This trick will get you a long way!
Ha det bra, SPA
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.
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.
Type safe all the way with Remix
Want to be really, really type safe, both on the front and back ends? With Remix, that's the default!
Want to be really, really type safe, both on the front and back ends? With Remix, that's the default!
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?
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?
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? 🤔
With React 18, a new hook is available which can slow down our UI on purpose 🤯 Why may we need such a hook? 🤔
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
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
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.
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.
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 🎅
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 🎅
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!
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!
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.
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.
Create a useful link abstraction in Next.js
The internal link abstraction with Next.js less than perfect. Let's create a better one!
The internal link abstraction with Next.js less than perfect. Let's create a better one!