I'm looking to write an HOC that counts and prints to the console the number of elements in the wrapped component. For example:

const Foo: FC<{}> = ({}) => {
    return (
        <div>
            <h1>Foo</h1>
            <p>Bar</p>
        </div>
    )
}


export default countH1(Foo)

this should print 1 and then return Foo as is for rendering.

React.Children.forEach(child => {...})

seems to be about the explicit children property and not descendant html elements. How can I achieve this?

First off, I've been loving vanilla-extract for the past 10 months. 😊

The only thing I really missed was the ability to sort CSS properties. Since there wasn't an ESLint plugin for that, I decided to create my own.

@antebudimir/eslint-plugin-vanilla-extract offers CSS property ordering (alphabetical, concentric, and custom), auto-fix capabilities, and supports multiple Vanilla Extract APIs.

If anyone wants to give it a shot, you can find more details in the readme. Looking forward to hearing your feedback.

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

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, 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)