DEV Community: Rushab jain

Error: Minified React error #130 in vite Projects

Rushab jain — Tue, 20 Dec 2022 07:27:22 +0000

Show me the fix
If you've encountered the Error: Minified React error #130 in your production environment, but not in your dev environment and you are migrating (from CRA) or using "Vite" it is frustrating trying to figure out what the issue is The error itself is quite vague, as it is displayed by minified React rather than any specific React error.i had spent a lot of time debugging this because i made the fundamental mistake of not following the debugging steps.
lets go through the steps which i should have followed in the first place-

Debug the app and get more details. To do this, use minify, sourcemap, and dev mode in your vite.config.js file:

export default defineConfig({
  plugins: [reactRefresh()],
  mode: "development",
  build: {
    minify: false,
    sourcemap: true 
  }
});

You may be able to pinpoint the buggy code by inspecting the console.eg

If you can't find the buggy code, try reproducing the bug with minimal code. Start by commenting out imports and their dependent code. This error often occurs in older npm libraries, so start with the oldest library you are using in package.json. This can be time-consuming, but it's worth it to find the root cause of the issue.
Once you've identified the problematic npm library, you have two options: update the package to the latest version and see if the bug is fixed, or use the hack suggested by the maintainers:

Workaround

import Something from "library";
const UseThis = Something.default ? Something.default : Something;

import RPI from "react-phone-input-2";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const ReactPhoneInput = RPI.default ?? RPI;

Or like me you may also choose to delete the dependency from your project altogether.

Why this occurred

The root problem is that many packages follow a bad practice that breaks Rollup ESM-CJS interop - sodatea
and Vite (which uses Rollup) handles default exports differently than CRA (which uses webpack or esbuild)

This is an open issue in the Vite repo This is an open, so if any future updates resolve it i will update this blog.

useTransition : The new react 18 hook you probably missed

Rushab jain — Mon, 21 Nov 2022 08:37:13 +0000

useTransition

This hook is one of the concurrent APIs released in React 18 that improves your application's overall quality and performance while also making them more user-friendly and responsive.

The useTransition hook is specifically designed to speed up applications and make them feel responsive to users, even when a lot is going on.

What's a transition?

A transition is a change between two states. For example, if you have a button that changes from red to green, that's a transition.

What is useTransition?

Returns a stateful value for the pending state of the transition, and a function to start it.

isPending indicates when a transition is active to show a pending state.

startTransition lets you mark updates in the provided callback as transitions.
-React Docs

i.e

const [isPending, startTransition] = useTransition()

useTransition() returns an array of 2 items:

isPending - It's a boolean value.
The isPending variable simply returns true while the code inside the startTransition hook is running.

startTransition(callback): It is a function that initiates the transition. It accepts a callback function as an argument. When the transition begins, the callback function is executed.

when to use useTransition?

eg: let's take a contrived example we have a very large list of items and an input box we have to search and render the results.

function App() {
  const [input, setInput] = useState('')
  const [list, setList] = useState([])

  const [isPending, startTransition] = useTransition()

  function onChangeHandler(event) {
    setInput(event.target.value)
    const listData = []
    for (let i = 0; i < 5000; i++) {
      listData.push(event.target.value)
    }
    startTransition(() => setList(listData))
  }

  return (
    <div id='app'>
      <input type='text' value={input} onChange={onChangeHandler} />
      <ul>
        {isPending ? (
          <li> Loading.... </li>
        ) : (
          list.map((item, index) => <li key={index}>{item}</li>)
        )}
      </ul>
    </div>
  )
}

when having two states input and list input state is responsible for maintaining the input value and the list state is responsible for maintaining the list of items. essentially the input string is rendered 5000 times in the list.

Because React recognizes that both state updates occur at the same time, it will batch them together and complete both state updates before rendering the component again. This is quite efficient because it only renders the component once after all state changes, rather than twice (once after each state change).

This works fine in most circumstances, though this can cause performance issues in some cases.

Because our list is so large, looping through it and rendering it all on the screen would take a long time and will be very slow to process. This is a problem since the list state update happens at the same time as the input state update, thus the component will not be rendered with the new state values for either state until both have completed processing, which means the input field will feel sluggish. Below is an example of this.

useTransition in action

useTransition() can be used to tell React that certain state updates have a lower priority (i.e., all other state updates have a higher priority). these state updates will be performed in parallel with other state updates, but the rendering of the component will not be delayed.

In our code below, we're wrapping setList in our startTransition method, which tells React that our setList state update is low priority. This indicates that the component should rerender as soon as all of our normal state updates are completed, even if this slow state update is not completed. Therefore, if a user interacts with your application, such as by clicking a button or entering data, those interactions will take priority over the code in the startTransition method. This ensures that even if you have extremely slow code executing, your user will be able to interact with the application.

function App() {
  const [input, setInput] = useState('')
  const [list, setList] = useState([])

  const [isPending, startTransition] = useTransition()

  function onChangeHandler(event) {
    setInput(event.target.value)
    const listData = []
    for (let i = 0; i < 5000; i++) {
      listData.push(event.target.value)
    }
    startTransition(() => setList(listData))
  }

  return (
    <div id='app'>
      <input type='text' value={input} onChange={onChangeHandler} />
      <ul>
        {isPending ? (
          <li> Loading.... </li>
        ) : (
          list.map((item, index) => <li key={index}>{item}</li>)
        )}
      </ul>
    </div>
  )
}

One thing to keep in mind with this use transition hook is that it should only be used when necessary. Because using the Used Transition forces your app to render more than usual. If we hadn't used useTransition, our input would have been updated, and our application would have been rendered to the page once because it rendered both the input and the list at the same time. When we executed our transition in this manner, our application did two separate renders.

If you wrap everything in its separate start transitions right now, your application will be rendering a lot. When, in reality, if there are minor changes that can all happen at once, it is far better to let them all happen at once. Use useTransition only when you're specifically running into performance issues where you have code that is slowing down or has the potential to slow down your application to reduce the number of times your application needs to rerender.

TL;DR -

import { useTransition } from 'react'

function App() {
  const [isPending, startTransition] = useTransition()

  function handleClick() {
    // do something important
    startTransition(() => {
      // Do something slow, expensive, and takes time...
    })
  }

  return (
    <button onClick={handleClick} disabled={isPending}>
      {isPending ? 'Loading...' : 'Click me'}
    </button>
  )
}

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Rushab jain — Sun, 24 Jul 2022 19:07:00 +0000

Take me to the fix

Where I encountered the bug-

export default function Nav() {
const user = getUser();

{user ? <AuthenticatedNav /> : <UnauthenticatedNav />} //this throws error
}

This error notice provides no information that could lead us to problematic code, but the console does.

but why?

What is causing this error?

While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that was rendered during the first render in the Browser. The first render is called Hydration which is a feature of React.
This can cause the React tree to be out of sync with the DOM and result in unexpected content/attributes being present. -nextjs docs

yes I kinda get it but still why

All I want to do is this-

If the user is logged in, render the <AuthenticatedNav> component; otherwise, render the <UnauthenticatedNav> component.

let us understand what is "hydration" and why is it used-

Server-side rendering (SSR) is used by frameworks such as nextjs to increase performance (LCP & FCP) and user experience (SEO) it renders the app on the server first, duh! It returns a fully-formed HTML document to the user but apps are "dynamic" and not everything can be accomplished by HTML & CSS so We tell React to attach event handlers to the HTML to make the app interactive.
This process of rendering our components and attaching event handlers is known as “hydration”. It is like watering the "dry" HTML with the "water" of interactivity(JS). After hydration, our application becomes interactive or "dynamic".
hydration and rehydration are often used interchangeably but during rehydration, the client-side JS includes the same React code used to generate it at compile time.
It runs on the user's device and builds up a picture of what the world should look like. It then compares it to the HTML built into the document. This is a process known as rehydration

In a rehydration, React assumes that the DOM won't change. It's just trying to adapt the existing DOM
When a React app rehydrates, it assumes that the DOM structure will match. If it doesn't then you know what

so in our case, we cannot possibly know the user state on the server and user state will return undefined until it is mounted on the client

So how to fix this -

essentially we have two ways to Fix this

useEffect/useMounted hooks
wrapping in a component

`useEffect` or `useMounted` custom hook

export default function Nav() {
  const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);
  if (!hasMounted) {
    return null;
  }
  const user = getUser();
{user ? <AuthenticatedNav /> : <UnauthenticatedNav />}

`useHasMounted` custom hook

function useHasMounted() {
  const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);
  return hasMounted;
}

Wrapping in a component

<clientOnly> component

function ClientOnly({ children, ...delegated }) {
  const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);
  if (!hasMounted) {
    return null;
  }
  return (
    <div {...delegated}>
      {children}
    </div>
  );
}

Then you can wrap it around whatever compenent you want to render client-side only-

<ClientOnly>
  <Nav/>
</ClientOnly>

What I did -

nav.js

import { UserState } from '../../context/userProvider'

export default function Nav() {
 UserState() ? <AuthenticatedNav /> : <UnauthenticatedNav />
}

userProvider.js //using a global user context provider

export function UserState() {
 const { user } = useUser();
 const [isUserLoggedIn, setIsUserLoggedIn] = useState(false);
  useEffect(() => {
     setIsUserLoggedIn(!!user);
   }, [user]);
  return isUserLoggedIn;
}

🙏Thank you for reading I hope you found this informative; if you have any criticism, suggestions, or corrections, please leave them in the comments section.

This Is a Lorem Ipsum Blog

Rushab jain — Thu, 21 Jan 2021 08:48:58 +0000

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letterset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humor and the like).