Sidebar
React
cosmicbyt.es
Hi all, This is my first time posting my blog, I hope you enjoy it!
dev.to
axel.leroy.sh
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
dev.to
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
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](https://github.com/doug-wade/adjunct/blob/main/src/hooks/useBrewerySearch.ts#L58) 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.
github.com
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 `Provider`s 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](https://blog.ninja-squad.com/), [Angular's blog](https://blog.angular.io/) or [/r/Angular2](https://old.reddit.com/r/Angular2/). I'm already following this community as well as [Josh W Comeau's blog](https://www.joshwcomeau.com/). Thanks in advance!
portal.gitnation.org
Really looking forward to this!
I started using [Virtua](https://github.com/inokawa/virtua) for [Voyager](https://github.com/aeharding/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 (<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
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
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); ```
