React

908 readers
1 users here now

A community for discussing anything related to the React UI framework and it's ecosystem.

https://react.dev/

Wormhole

[email protected]

Icon base by Skoll under CC BY 3.0 with modifications to add a gradient

founded 1 year ago
MODERATORS
1
2
Chakra UI: Announcing v3 (www.chakra-ui.com)
submitted 1 week ago by [email protected] to c/react
2
3
 
 
4
3
submitted 1 month ago* (last edited 1 month ago) by cosmicbytes to c/react
 
 

Hi all,

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

5
6
7
8
State of React 2023 survey results (2023.stateofreact.com)
submitted 3 months ago by [email protected] to c/react
8
 
 

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

9
10
10
submitted 5 months ago by [email protected] to c/react
11
 
 

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!

12
5
submitted 6 months ago* (last edited 6 months ago) by [email protected] to c/react
 
 

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

13
11
submitted 6 months ago by starman to c/react
14
-2
submitted 7 months ago* (last edited 7 months ago) by [email protected] to c/react
15
 
 

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.

16
17
18
 
 

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
19
20
 
 

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)
21
8
Why React Re-Renders (www.joshwcomeau.com)
submitted 9 months ago by mac to c/react
22
 
 

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!

23
24
3
React Newsletter #395 (reactnewsletter.com)
submitted 10 months ago by mac to c/react
25
 
 

Really looking forward to this!

view more: next ›