Hi all,

This is my first time posting my blog, I hope you enjoy it!

The article mentions Next.js but it also applies to vanilla React as the sizes attribute is useful even outside Next's <Image> component.

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

Firereact is hooks, component and utilities library for Firebase and React.

Features

• Very lightweight, when unpacked, when minified, 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:

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:

<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:

<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!