React
- cosmicbyt.es Reactivity and Reactive Programming
Nearly all modern browser UI frameworks boast Reactivity as a core feature. What is Reactivity all about? Is it useful or applicable outside of frontend development? what is the hype all about anyways?
Hi all,
This is my first time posting my blog, I hope you enjoy it!
- mui.com Material UI v6 is out now 🎉 - MUI
Material UI v6 ships with support for CSS variables, container queries, and advanced color schemes, as well as improved runtime performance and a reduced bundle size.
- dev.to Building an AI-powered quiz application with Next.js and OpenAI
In this tutorial, you'll learn how to build an AI-powered quiz application that enables users to...
- 2023.stateofreact.com State of React 2023
The 2023 edition of the annual survey about the latest trends in the React ecosystem.
- axel.leroy.sh An ESLint rule to require the sizes attribute for Next.js’s <Image>
I forgot to set the sizes attribute on <Image>s, resulting in bigger than required images to be sent to users. This led me to write an ESLint rule to prevent this issue from happening again.
The article mentions Next.js but it also applies to vanilla React as the
sizes
attribute is useful even outside Next's<Image>
component. YouTube Video
Click to view this content.
Livestream: https://www.youtube.com/watch?v=T8TZQ6k4SLE
Agenda: https://conf.react.dev/agenda
- dev.to Latitude: The missing analytics layer between your database and your users 🤝🏽
What is Latitude? Latitude is the open-source framework for embedded analytics. Create...
- dev.to How I keep my ExpressJS & React apps fast with server-side caching
TL;DR In this tutorial, you’ll learn how to implement server-side caching to ensure your...
Hi there,
I have written an article on implementing server-side caching that ensures your app stays fast as you scale.
I’ve used ExpressJS for the API server, and React for the frontend.
Hope this helps someone!
- nextjs-app-router-training.vercel.app Next.js App Router Training
Introducing various basic patterns using Next.js' app router with simplified code.
I stumbled upon this project on GitHub and figured it might be of interest to some people here
- www.joshwcomeau.com Folding the DOM
In this post, we'll explore a technique we can use to "fold" a DOM node, like folding a letter in real-life. On that journey, we'll learn a lot about 3D transforms and CSS animation techniques!
- github.com GitHub - iByteABit256/tic-tac-toes: Super Tic Tac Toe
Super Tic Tac Toe. Contribute to iByteABit256/tic-tac-toes development by creating an account on GitHub.
I have a custom hook that I'm working on to make a fetch request to an api, and it is causing infinite re-renders. I'm struggling a bit to understand how the various parts of my application fit together -- in particular, my store (zustand) is using a middleware (immer) for immutable state, and I'm not certain why its drafting system isn't protecting me from changes in object identity. What tools can I use to try to track down what I've gotten wrong? I can't really leave the web page open very long because I'm making 1000s of requests per minute to the api I'm working against, so the Chrome dev tools are out, and the static analysis tools I set up (typescript and eslint) haven't identified any errors, like missing a dependency from the useEffect hook dependency array.
- www.lemonsqueezy.com Wedges — Open-source UI components for React • Lemon Squeezy
Build faster with Wedges. An open-source collection of UI components for React. Beautiful UI components for React, lovingly crafted with the Wedges Design System, Radix UI, and Tailwind CSS.
- react.dev React Labs: What We've Been Working On – February 2024 – React
The library for web and native user interfaces
- github.com GitHub - erayerdin/firereact: React hooks, components and utilities for Firebase
React hooks, components and utilities for Firebase - GitHub - erayerdin/firereact: React hooks, components and utilities for Firebase
Firereact is hooks, component and utilities library for Firebase and React.
Features
- Very lightweight, !unpacked size when unpacked, !npm min bundle size when minified, !npm minzip bundle size when minified+gzipped
- Supports Auth, Firestore, Functions, Providers and Storage.
- Provides hooks such as
useUser
for Auth oruseDocument
for Firestore, which can listen to realtime changes as well - Provides custom components such as
<FirestoreDocument />
or<StorageDownloadLink />
to keep the logic simple and/or avoid unnecessary rerendering - Provides
Provider
s such asFirebaseSuiteProvider
,FirebaseAuthProvider
orFirestoreProvider
to access Firebase service instances anywhere in the component tree without relying on global variables or prop-drilling - Comprehensive documentation
- • 100%www.sonarsource.com Lessons learned upgrading to React 18 in SonarQube
We share the biggest three issues we faced and the lessons we learned as we upgraded SonarQube to React 18.
I use React Helmet. I wanted to inject social meta tags in some of the pages. In order to DRY, I wanted to define these social meta tags as a separate component, which looks as below:
```typescript type SocialMetaProps = { title: string, description: string, }
const SocialMeta = ({ title, description }: SocialMetaProps) => { return ( <> <meta property="og:title" content={title} /> <meta property="og:description" content={description} /> <meta property="og:url" content={window.location.href} />
<meta property="twitter:title" content={title} /> <meta property="twitter:description" content={description} /> <meta property="twitter:url" content={window.location.href} /> </> ) }
export default SocialMeta ```
...which looks as such when I use it in a page:
typescript <Helmet> <title>{resource.title}</title> <SocialMeta title={resource.title} description={resource.shortDescription} /> </Helmet>
The problem with that is that
SocialMeta
component does not render anything. I can confirm it by firing up browser console and doingdocument.head.getElementsByTagName("meta")
. However, if I do it as below:```typescript <Helmet> <title>{resource.title}</title>
<meta property="og:title" content={resource.title} /> <meta property="og:description" content={resource.shortDescription} /> <meta property="og:url" content={window.location.href} />
<meta property="twitter:title" content={resource.title} /> <meta property="twitter:description" content={resource.shortDescription} /> <meta property="twitter:url" content={window.location.href} /> </Helmet> ```
...it naturally renders the tags.
My best guess is that Helmet does not unpack
<></>
. Is there a way to render a custom component insideHelmet
component?Thanks in advance.
***
Environment
- Vite
- Typescript
- React ^18.2.0
- Helmet ^6.1.0
- React Router (DOM) ^6.20.1 (if relevant)
- • 100%www.joshwcomeau.com Why React Re-Renders
In React, we don't update the DOM directly, we tell React what we want the DOM to look like, and React tackles the rest. But how exactly does it do this? In this tutorial, we'll unpack exactly when and why React re-renders, and how we can use this information to optimize the performance of our React...
Hello there,
I'm moving from the Angular world to React and I'm looking for websites, Lemmy communities and Mastodon profiles to follow to keep up with the latest React news and best practices.
Ideally I would like resources similar to Ninja Squad's blog, Angular's blog or /r/Angular2. I'm already following this community as well as Josh W Comeau's blog.
Thanks in advance!
- • 83%ui.dev The Interactive Guide to Rendering in React
In this interactive guide, we'll explore why, when, and how React renders.
- • 80%reactnewsletter.com React Newsletter #395
Astro 4.0 beta, Svelte through the eyes of a React developer, and Partial prerendering in Next.js 14
- portal.gitnation.org React Forget Compiler - Understanding Idiomatic React - GitNation
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization.
Really looking forward to this!
- timtech.blog React Server Components, without a framework?
Can we use React Server Components today, without a framework like Next.js? As our experiment shows, not without significant challenges - for now at least?
- • 90%reactnewsletter.com React Newsletter #393
RSC without a framework, Why you need React Query, and react-google-maps
- • 100%reactnewsletter.com React Newsletter #392
Simplifying React state management, How to think about security in Next.js, and Simplifying server components
I started using Virtua for Voyager and I'm really impressed! It has a dead simple API (wrap existing
.map
withVList
component), avoids rerendering items on scroll like other solutions, doesn't glitch on iOS devices with unknown height items like many other libraries, super small footprint. The author is also very responsive. Thought I'd share!https://github.com/inokawa/virtua
- • 100%blog.coderspirit.xyz How to create a React components ESM+CJS library
Learn how to create a React component ESM+CJS library using Rollup, TypeScript and Storybook
cross-posted from: https://programming.dev/post/3007051
> Tutorial on how to create dual ESM+CJS React component libraries.
Do you prefer your modal component (<dialog>, <Modal>, etc.) to be controlled or uncontrolled?
Uncontrolled: When I use the HTML native <dialog>, I need to access methods on
HTMLDialogElement
using a ref. This feels uncomfortable and not idiomatic React.Controlled: I prefer using a boolean prop to control the open/closed state of the dialog. However, then I need to handle some features like Close on ESC key, which may otherwise cause the open/closed state to desync from the actual dialog state. I also have to be careful about using other HTML features that may close the dialog, e.g. <button formmethod="dialog">
altogether and instead use "legacy" modals built with carefully styled <div>s. But then I give up on many of the nice features of <dialog>, such as tab focus containment and accessibility.
What is your preferred way of using modals? Controlled vs uncontrolled? <dialog> vs <div>s?
Edit: Lemmy dislikes angle brackets inside \
\
:(I'm in the middle of a systems design class, and we're supposed to get our own VPS up and running. For quick background, I found a PERN app on GitHub, and cloned that onto my digitalocean droplet, and have it connected to my domain and nginx. I have the dist directory for the production build, copied it in the backend folder, and I see my app on my domain path. I'm getting an issue with an index#####.js file that's causing a cors error for localhost:4000, which is confusing since I have a reverse proxy for that port on my domains nginx conf. I did some digging and found a (very long) line of code that goes through the http methods and they each have a "localhost:4000/" for what route to go to for each method. I tried changing these to just / for each and it got rid of the cors error but now I'm getting an error with the promise failing. Do I need to add my domain to those paths? Or am I missing something else here?
Using react router and have a route definition:
{ path: '/', element: <Root pageTitle={pageTitle} />, errorElement: <ErrorPage setPageTitle={updatePageTitle} />, children: [ ... { path: '*', element: <ErrorPage setPageTitle={updatePageTitle} />, loader: async () => { throw new Response('Not Found', { status: 404 }); }, }, ], },
This shows me 404 page how I want but without the rest of the root element but also the http status is reported as 200. How do I properly throw it as a 404 and show it inside root element?
Using react router and have a route definition:
{ path: '/', element: <Root pageTitle={pageTitle} />, errorElement: <ErrorPage setPageTitle={updatePageTitle} />, children: [ ... { path: '*', element: <ErrorPage setPageTitle={updatePageTitle} />, loader: async () => { console.log('throwing a 404'); throw new Response('Not Found', { status: 404 }); }, }, ], },
This does show me the 404 page how I want, but http status is reported as 200. How do I properly throw it as a 404?
It seems not to trigger the loader (console log does not appear), or is there another method to throw a 404 and show a pretty page?
I haven't had a need for suspense, I use react query without suspense just using the data, error, isLoading etc state directly. And I don't see Suspens as a simpler pattern necessarily. What does it get you that other patterns don't? I'm curious to know your use cases!
- github.com Property 'li' does not exist on type 'JSX.IntrinsicElements' · Issue #436 · neoclide/coc-tsserver
I am new to react and every time I open or write regular html tags I get errors about them using coc-tsserver ## versions vim version: VIM - Vi IMproved 9.0 9001424 node version: v20.3.1 coc.nvim v...
I am not sure why my tsserver lsp is complaining about regular tags in my react code. Anyone have any ideas.
I'm usually a backend dev, but have been playing with React. I'm really interested in React Native and would love some guidance, tips, tutorials, etc.
- rtk-query-loader.ryfylke.dev Introduction | RTK Query Loader
Create loaders for your React components.
RTK Query Loader lets you create loaders for your React components.
```typescript const loader = createLoader({ useQueries: () => { const [name, setName] = useState("charizard"); const debouncedName = useDebounce(name, 200); const pokemon = useGetPokemon(debouncedName); return { queries: { pokemon, }, payload: { name, setName, }, }; }, });
const Consumer = withLoader((props, data) => { return ( <div> <input value={data.payload.name} onChange={(e) => data.payload.setName(e.target.value)} /> <div>AP: {data.queries.pokemon.data.ability_power}</div> </div> ); }, loader); ```
- prophet-bestman.hashnode.dev Mastering Complex State Management with Context API and useReducer
Mastering Complex State Management with Context API and useReducer
React Context + useReducer - Still to this day my favorite way of managing global state in React, no extra dependencies, no learning curve, it's all there built-in