React

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!

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.

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