ProfessorTag

u/ProfessorTag



r/reactjs•

I've put together a few abstractions that help me render loading states. The library is pretty minimal, 3 functions and 126 lines of code. React is the only dependency.

https://github.com/JeremyRH/react-promise-utils

  • Preserves last rendered elements while new data is fetched.
  • Prevents slow responses from clobbering new ones.
  • Tries to help with ARIA live regions.

The API accepts promise objects and was designed around storing promises in state. Here's an ugly codepen example if you want to see it in action: [https://codesandbox.io/s/react-promise-uti

10





r/typescript•

I have a function that accepts two function arguments, callback and getValue. I'm wondering why the callback's argument cannot be inferred when I do this: callback(getValue({ value: 1 })).

Playground link.

It works if I reverse the argument order. I assume this is because the type of value (line 14) cannot be inferred until the function type on the next line is analyzed.

22

r/reactjs•

Let me start off by saying I know you shouldn't mutate state because your state and view can become out of sync and it is difficult to find issues when you can't follow the flow of data. The answer to most state problems is to move state up to the parent.

But it seems more sensible to keep state related to a component, in the component. For example, using controlled inputs in a form just to have access to the values on submission seems to add unnecessary boilerplate. Your form reducer needs case statements for all input values and the form component has to pass the value and dispatch to the input. Yes, you can use a ref, new FormData(event.target) in onSubmit, or even [some iframe mag

39

r/reactjs•

I'm working on a medium-size React application and using Context for global state. I use separate Context Providers for different pieces of data so components don't re-render unnecessarily.

It can be difficult to place the Providers in the right spot. I have to account for dynamic routing so I usually default to placing the Provider at the very top. But then I have all these Providers at the top of my tree and it seems messy.

I started using zustand a few weeks ago to manage global state without Providers and it seems great. This feels like cheating though and I'm afraid that I'm unknowingly painting myself into a corner.

Does anyone have insight

1110

r/typescript•

I'm having trouble with type inference on this function. It seems to work intermittently. Sometimes it infers the type {} and other times it will infer the correct type. Here is an example:

function foo<T>(a: (b: () => T) => T) {
  const b = () => value;
  const value = a(b);
  return value;
}

const v = foo(b => 'a'); // 'v: {}' but should be 'v: string'

I could declare the type for b when I call foo() but foo is sometimes called from JS and I wanted to leverage IntelliSense while working in JS. Is there another way I can do this?

Additional info:

  • TypeScript v3.4.3
  • Using VSCode to inspect types

Screenshot of it working intermittently

35

r/reactjs•

Are there any routing libraries that allow you to dynamically declare routes without using components? Here is an example of what I'm thinking:

import { useRouter, route, exactRoute, redirect } from "some-router";

function async rootRouter() {
  if (await fetchCurrentUser() === null) {
    return redirect.to("/login");
  }

  return [
    exactRoute("/", Home),
    route(["/about", "/info"], About),
    route("/user/:userId", User),
    route("**", NoMatch)
  ];
}

function App() {
  const Component = useRouter(rootRouter);
  return <Component />;
}

I've looked at [react-router-config](https://github.com/Rea

03

r/buildapc•

I recently purchased a defective power supply from evga.com and the refund process is extremely painful.

  • The first step in EVGA's return process is to contact customer support.
    • I understand, it's their way of reducing the number of returns.
  • The return form has two options, "replacement" and "refund". If any of the form fields fail validation, it resets to "replacement".
    • This seems like an easy way for the customer to make a mistake and submit the request as a replacement.
  • They don't pay for return shipping.
    • This is not standard, most businesses will pay for return shipping if the item is defective.

I fell into their trap and my refund was processed

98