Livestream: https://www.youtube.com/watch?v=T8TZQ6k4SLE

Agenda: https://conf.react.dev/agenda

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!

I stumbled upon this project on GitHub and figured it might be of interest to some people here

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.

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 or useDocument 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 Providers such as FirebaseSuiteProvider, FirebaseAuthProvider or FirestoreProvider to access Firebase service instances anywhere in the component tree without relying on global variables or prop-drilling
• Comprehensive documentation

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 doing document.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 inside Helmet component?

Thanks in advance.

***

Environment

• Vite
• Typescript
• React ^18.2.0
• Helmet ^6.1.0
• React Router (DOM) ^6.20.1 (if relevant)

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!

Really looking forward to this!

I started using Virtua for Voyager and I'm really impressed! It has a dead simple API (wrap existing .map with VList 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

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 (&lt;dialog>, &lt;Modal>, etc.) to be controlled or uncontrolled?

Uncontrolled: When I use the HTML native &lt;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. &lt;button formmethod="dialog">

altogether and instead use "legacy" modals built with carefully styled &lt;div>s. But then I give up on many of the nice features of &lt;dialog>, such as tab focus containment and accessibility.

What is your preferred way of using modals? Controlled vs uncontrolled? &lt;dialog> vs &lt;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!

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 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); ```

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

Plebbit is not a joke. You can see a demo here.

There is a whitepaper, and there has been a lot of work already using cool technologies like ENS (Ethereum Name Service) and IPFS (Inter Planetary File System).

To help keep Plebbit free from censorship, it is distributed, and nodes, built with React, use peer-to-peer tech to communicate.

If you like, please take a look at what Plebbit is doing and see how you might be able to make it more responsive.

https://github.com/plebbit/plebbit-react

You can chat with @estebanabaroa on Telegram if you have questions or suggestions:

https://t.me/plebbit

This may be a very stupid question. But I was wondering if I should be using arrow function syntax or the classic function syntax for react components now or is this purely a style choice. I ask this purely as someone trying to work towards industry standards but have found a tremendous amount of mixed comments on it. Also is there any difference using typescript?

Example: const foo = () => {}

Or

function foo() {}

Here we can discuss everything related to React ecosystem ( including Next, Preact, etc. )

Definitely something to look into for more complex apps, I'm still trying to add it to Next.js but with all the /app dir migration stuff it's becoming a headache