Josh W Comeau·4yWhy React Re-Renders
This tutorial is written to help beginner-intermediate React developers get more comfortable with React. It's the only “trigger” in React for a component to re-render. In React, every state change in React forces an application-wide render, but this isn't true. In this case, it sees that our paragraph has a text node that changed from 0 to 1.
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.
Community Picks·4yBuilding a chat app with Socket.io and React 🚀
Socket.io is a popular JavaScript library that allows us to create real-time, bi-directional communication between web browsers and a Node.js server. To develop a chat app you would need to be aware of new messages as soon as they arrive. To read this article you'll need to have a basic knowledge of React.io.
LogRocket·4yMicro-frontend with React and Next.js
The bottom line is that you should split your project up so that the user experience won't be disturbed. It should look like this: We have to expose our component to make it globally available for another micro-frontend. We will use the exported component of fe1 and the function of fe2. Let’s treat fe3 as a consumer. Let's treat fe2 as a customer. Let�’S treat fe1 as a consumers.
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.
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.
Community Picks·4y5 Good practices to scale your React projects easily
Reuse and reduce development time. Organize project and prevent project reconstructions. Show you are good developer by taking consideration of the project and other devs. Here are 5 lessons I learned from scaling my React projects.
Community Picks·4yHow to build a real-time Auction System with Socket.io and React.js
The auction runs on the "fast" decision bid, where someone else will win or outbid you if you don't bid fast enough. To use online bidding, we must stick to the same principles. Use an open-socket (Websockets) to get information directly from the server when a new bid arrives. Next, add Socket.io to the project to create a real-time connection.
Community Picks·4yTypeScript - The Best Way to Use It with React
TypeScript is a great way to improve your React code. It can help you catch errors, optimize performance and make your code more readable. It is possible to write code that is valid TypeScript but will not compile because of an error in React. This means that developers need to be aware of both TypeScript and React when they are writing their code. Test your API for free now at BLST!
Community Picks·4yAnnouncing Docusaurus 2.0
Docusaurus is a static site generator that helps you ship beautiful documentation websites in no time. Its flexible theming system permits to adapt the UI to match your branding so that it integrates nicely with your main website or documentation portal. From now on, we plan to respect Semantic Versioning and will release major versioning.
Hashnode·4yUnit testing with Jest, React, and TypeScript
Software testing is critical to lower the chances of our program failing by running tests with the end-user in mind. Testing-library/react is a testing utility tool that's built to test the actual DOM tree rendered by React on the browser. The goal of the library is to help you write tests that resemble how a user would use your application.
Hacker News·4yAstro 1.0
Astro v1.0 is a web framework for building fast, content-focused websites. Over the last 16 months, Astro has grown from an empty repo to over 13,000 stars on GitHub and 30,000 early users around the world. Astro has already been Addy Osmani, Software Engineer, Google Chrome Astro’s fast performance is even more noticeable to end users.
Community Picks·4yJavascript to know for Reactjs
React js is an open javascript library that enables us to be build fast, declarative and component driven web development. With reactjs you can build web apps, cross platform mobiles apps (react native), desktop apps (electron, node gui), progressive web apps (pwas)
TkDodo·4yAvoiding useEffect with callback refs
Ref is a reserved property on build-in primitives, where React will store the DOM node after it was rendered. It will be set back to null when the component is unmounted. The linter won't complain about adding it to the dependency array, and the ref is also not read during render. The effect will run once "on mount" (twice in strict mode. If the react element unmounts, it will be called once more. The react element is called once again. The reaction element was called once further. The ref is called again. It will also be called as an argument.
Medium·4yThe Ultimate Clean Architecture Template for TypeScript Projects
The Ultimate Clean Architecture Template for TypeScript Projects. A guide on creating a layer-based TypeScript project template following the principles of clean architecture. A Detailed Implementation Guide Create your project directories and root Configuring Core, Data, and DI Setting up the mono repo configuration.
Bits and Pieces·4yAll the New Features in Next.js v12
Middleware uses middleware to intercept an HTTP request and process it in some way before it goes to your With Bit. With Bit, you can create any part of your app as a “ component’s composable and reusable. You and your team can share a toolbox of components to build more apps faster and consistently together.
Changelog·4yaidenybai/million: Virtual DOM into the future!
Million makes creating user interfaces as easy as React, but with faster performance and smaller bundle size for the end user. Million is being used at companies like Wyze and open source work like Quartz, TinyPages, and more. We expect all Million contributors to abide by the terms of our Code of Conduct.
DEV·4yTypeScript: Ultimate guide for beginners
TypeScript is a superset of JavaScript that extends the language by adding types and other functionalities. To run TypeScript for the first time with no projects created, you can create a.ts file with a sample code and run the following command to convert this TypeScript file to JavaScript. To create your own project from scratch, [0, 1, 5, 8, 10].
Hashnode·4yCreate a new React app with Vite
Vite: Enables Hot Module Replacement (HMR) Helps you import and manage your project and manage. With one command and a few seconds, it can generate all the above boilerplate for you and more. It’s fast, and you keep your application state if you want. HMR saves time you would otherwise spend waiting around or inputting data to recreate your app state. It reduces friction.
Hashnode·4yWeb-based all-in-one gradient editor.
Gradientify is a free online tool that provides 100+ trendy, beautiful, carefully crafted gradients for your apps, blog, UI design or to be used as content backgrounds. It is open source and you can use it for free without attribution. Save gradients, Search gradient by Hex, add new gradients and add newGradients and dark mode.
Hashnode·4yHere's what every React Developer needs to know about TypeScript - Part 1
TypeScript is an open source language developed and maintained by Microsoft. It is a multi-paradigm language (like JavaScript) Allows the use of static types Extra features (generics, interfaces, tuples, etc) Allows for gradual adoption*.
freeCodeCamp·4yLearn React from Three All-Star Instructors
Learn React from Three All-Star Instructors React is one of the most popular frontend JavaScript frameworks. We just published a full React course for beginners on the freeCodeCamp.org YouTube channel. This course is a project-based course and focuses on teaching you everything you need to know to start creating your own React applications.
