freeCodeCamp·4yHow to Prepare for React Interviews – Front-End Technical Interview Guide
A polyfill is a custom implementation of native JavaScript functions. The.map() polyfill method takes in a callback that gets executed inside the myMap body. This is nothing but the length of the array through which theMyMap function is called. Since map() returns a new array, we create an empty array and push the results into it. In order to implement debouncing, let's take an example.
Patterns·4yHooks Pattern
React 16.8 introduced a new feature called Hooks. Hooks are functions that you can use to manage a components state and lifecycle methods. Hooks make it possible to - add state to a functional component - manage a component's lifecycle without using a class component. In both componentDidMount and componentWillUnmount, we're customizing the behavior of the app based on the window's resize event.
Josh W Comeau·4yUnderstanding useMemo and useCallback
The main thing that React does is keep our UI in sync with our application state. The tool that it uses to do this is called a “re-render” Each re-render is a snapshot of what the application's UI should look like at a given moment in time. For example, let's suppose our example also features a digital clock. We could potentially run into some performance problems if we wind up doing this work gratuitously.
gitconnected·4yReact code conventions and best practices
React code conventions and best practices use linting and automatic formatter. Use PascalCase in components, interfaces, or type aliases. Prefer using typescript barrels A barrel is a way to roll up exports from several modules into a single convenient module.
Honeypot·4y9 Bad React Habits to Kick From Your Life
React has become a word that developers worldwide hear on a regular basis. Too much flexibility makes it easy to pick up bad habits and poor practices. Here are some of the worst practices I’ve seen (and may or may not have done in the past) The useEffect hook is probably one of the first hooks a React developer learns.
DEV·3y20 Git Commands you (probably) didn't know about 🧙♂️
A lot of these commands are incredibly powerful and can make your life a lot easier. This post outlines 20 of my favourite under-used git features, which you can use to level up your development process, impress your colleagues, help you answer git interview questions, and most importantly - have fun with! Git Web Run to instantly browse your working repository.
Community Picks·4yReact re-renders guide: everything, all at once
Re -render happens when React needs to update the app with new data. Preventing re-renders with composition is an anti-pattern that can be the biggest performance killer. On every re-render React will re-mount this component (i.e. destroy it and re-create it from scratch), which is going to be much slower than a normal re-rendered. This pattern can be beneficial when a heavy component manages state.
freeCodeCamp·4yHow to Animate Your React Apps with 1 Line of Code
The power of AutoAnimate is that it allows you to animate your entire app using a single function called autoAnimate. In this tutorial, we will see how to implement virtually every common animation in your React apps with one line of code. You can become a pro in 30 minutes a day with my React Bootcamp. Go from absolute beginner to React professional in just 30 minutes.
Community Picks·4yReact I Love You, But You're Bringing Me Down
React I Love You, But You're Bringing Me Down Dear React.js, we've been together for almost 10 years. We have to split contexts to avoid unnecessary rerenders. Most of the time, when a component uses a ref, it passes it to a child component. It's been 10 years, and you still have that flaw.
Medium·4yA guide to React 18 hooks
React 18 Hooks are the new patterns that got introduced in React 16.8 version. Hooks were introduced in class components but this time in the functional components. These Hooks Apis could help us interact with the React local states, the lifecycle features and many more things.
DEV·4yMe & React: 5 years in 15 minutes
React has finally started making sense to me. It was almost the same as my old pal HTML, except JSX allowed splitting HTML pages into tiny dynamic building blocks. A stateful component had a state which was triggering a re-render on change, while the stateless had only the render part and were rendering the same thing. It made debugging quite mind bending, as sometimes console.log has been printed a microsecond before the state was actually propagated. Redux has treated me a bit better.
TkDodo·4yWorking with Zustand
Zustand provides a simple API to create global state stores and subscribe to them via selectors. It provides the bear minimum to get you started (hence the logo), and it's flexible enough to scale to your needs. It doesn't track which fields you are using like other libraries do - you have to subscribe "
asayer·4yUnderstanding the useId hook in React
UseId hook generates a stable id that can be used across any application’s server and client side of any application. The useId hook was formerly known as the useOpaqueIdentifier hook, but there were many concerns when using it. We have looked at isomorphic applications and why using libraries like uuid or options like Math.random is bad.
Community Picks·4yThere’s No Magic in React
JS engine will go through our code starting from the ‘global scope’ The aim of these lines is to understand what happens inside the components every time we update the state. When we call count we access to n from the outer scope (line 2) States update with value or updater Now, can you tell me what will be shown on the screen with this code? What’s your guess?
Community Picks·4yUse React Context for Auth
React Context is built into React, it's a native feature. This means that we don't need to install any third party libraries to use it. We will only build the frontend part, meanig the part that will allow our frontend to know if the user is logged in or not and react accordingly. The next step is to wrap your app in the context provider.
freeCodeCamp·3yBetter React Performance – When to Use the useCallback vs useMemo Hook
Using the useCallback vs useMemo Hook is one of the built-in hooks we can use to optimise our code. In this article you will learn the differences between and as well as how to measure the gain of the improvements you're getting in the codebase. The following methods for optimising React are really last resort options.
Vercel·4yBuilding an interactive WebGL experience in Next.js – Vercel
Next.js is a JavaScript API for rendering 3D graphics within a web browser. By leveraging WebGL, we were able to take what would have been a static conference signup and turn it into the immersive Next.js Conf registration page. We now have some pieces to build a mini-game, but thin, uniform lines don’t look like the rays of light.
Hashnode·4yTDD (Test Driven Development) Basics Tutorial with TypeScript/React
The 4 steps are what I think are what are needed in learning TDD. In the previous test, I actually omitted some important setups. This example app uses "pseudo" API to call data. So it runs perfectly on testing environment.
Telerik·4yThe Guide to New Hooks in React 18
React 18 is a major release that comes with new features such as concurrent rendering, automated batching, transitions, new APIs and hooks. In this tutorial, we will cover the five new hooks that arrived in React 18: Are you feeling a bit rusty on the topic of hooks in general? Then you could check out the src/App.jsx import UseIdExample from "examples/UseIdExample" The image below.
This Week In React·4yThis Week In React #125: tRPC, T3, Remix, Zustand, Server Components, Drag & Drop, Forms, Gatsby, Remotion, React-Native, Skia...
This Week in React #125: tRPC, T3, Remix, Zustand, Server Components, Drag & Drop, Forms, Gatsby, Remotion, React-Native, Skia. This week is Black Friday. I created a page with the best deals for a React dev.
Pointer·4ytoss/slash: A collection of TypeScript/JavaScript packages to build high-quality web services.
Slash is a collection of TypeScript/JavaScript packages used in Toss. It provides over 30 npm packages which can serve as a foundation to provide high-quality web services. Check out our Slash libraries docs.
WunderGraph·4yNextJS / React SSR: 21 Universal Data Fetching Patterns & Best Practices
NextJS Universal Data Fetching is that you can put a data-fetching hook anywhere in your application, and it would just work. Most applications have some sort of authentication mechanism, but we need to make our API layer type-safe. Type-Safety is needed to avoid bugs and make Developers productive. What should happen if the user leaves and re-enters the window.