irinakk

irinakk

Member Since 7 years ago

Experience Points
12
follower
Lessons Completed
0
follow
Best Reply Awards
10
repos
Activity
Dec
8
1 month ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

Bug: Call render if set state value same of default value, and then not update View

React version:

Steps To Reproduce

1.16.14.0 2.^17

Link to code example:

https://codesandbox.io/s/friendly-lumiere-srnyu

I found that It will call render function 3 times in console, but not update the View after the last times.

The current behavior

I can't understand why the third render has been called. The v state default value is true and call setV(true) in the setTimeout.

The expected behavior

Shouldn't call render function if set the value of state same of the default value??

Dec
7
1 month ago
Activity icon
issue

irinakk issue comment vitejs/vite

irinakk
irinakk

do not want to allow absolute css URLs to be a css module

Clear and concise description of the problem

in index.html, vite compile the css link as module which do not in public dir and do not start with https?:,such as <link rel="sheetstyle" href="/lib/element-plus/1.2.0/index.css">. but i do not want it to be a module. the code in **vite/packages/vite/src/node/plugins/html.ts **(line 267) use isExternalUrl function in vite/packages/vite/src/node/utils.ts to confirm.

Suggested solution

Maybe can add some attribute in the link tag to tell html compiler the css link is not a module. such as <link rel="sheetstyle" module="false" href="/lib/element-plus/1.2.0/index.css">

Alternative

No response

Additional context

No response

Validations

irinakk
irinakk

I struggled on this and hacked with the ?direct like <link rel="sheetstyle" href="/lib/element-plus/1.2.0/index.css?direct"> after browsing the source code...

Dec
6
1 month ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

Why React change keys with dot dollar ? ".$"

Can we get explanation why all keys are mutate with .$ by react ? image

so we always need a hack like this to extract key ?!

const { key, type, props } = childnode;
const keyid = ( key as string ).split( '.$' )[1];
irinakk
irinakk

This is the result of using React.Children.toArray or React.Children.map: https://github.com/facebook/react/issues/5541#issuecomment-159425628

Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

Bug: In strict-mode, useRef gives you a different object each time component is called during the first render

In strict mode, React will call render method twice, to catch mutate-during-render type of bugs. However, there is an inconsistency in the way this is done for useRef().

During the first render only, each call will give you a fresh ref object. During subsequent calls, you will be given the same object during both calls.

React version: 17.0.2

Steps To Reproduce

Here is a little app to demo this.

import React from "react";
import "./styles.css";

const Hooky = () => {
  const ref = React.useRef(null);
  const [num, setNum] = React.useState(0);

  ref.current = (ref.current || 0) + 1;

  return (
    <div>
      <p>
        Val: {num} <br />
        <button onClick={() => setNum(Math.random())}>Roll</button>
      </p>
      <p>Ref count: {ref.current}</p>
    </div>
  );
};

const App = () => {
  const [show, setShow] = React.useState(false);

  return (
    <div>
      <h2>Show or hide</h2>
      <button onClick={() => setShow(!show)}>{show ? "Hide" : "Show"}</button>
      <hr />
      {show && <Hooky />}
    </div>
  );
};

export default App;

Click "Show". You will see ref count set to 1, indicating the useRef has returned a different object both times it was called (it could also mean the component was called only once, but that isn't the case, I checked using debugger). If you force rerender by clicking the other button, the ref will increase in increments of 2, which is what you'd expect.

Link to code example: https://codesandbox.io/s/react-fiddle-forked-fkocg?file=/src/App.js

The current behavior

useRef in strict mode has one behavior during first render and other during subsequent renders.

The expected behavior

useRef operates consistently during all renders. Either always gives you the same object, or has a separate object for each "lane" and always reuses the same one.

Basically, the counter in the code sandbox example should either go: 2 4 6 8 or 1 2 3 4. Not 1 3 5 7, as it does now.

Why this matters

Practical issue where I encountered this was trying to do subscribe/unsubscribe system using refs. I want my components to consistently subscribe and subscribe callbacks, kind of like element ref works. This failed when I detected callbacks not getting called, due to a duplicate ref object provided the first time component is rendered.

irinakk
irinakk

Here's an explanation on this: https://github.com/facebook/react/issues/18003#issuecomment-941673204 for safely manage subscriptions, you might want to look into useSubscription / useMutableSource / useSyncExternalStore.

Nov
27
1 month ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

React 18: Unexpected component unmounting in Strict Mode

This is an issue I've come across when trying to upgrade react-query to v18.

A minimal reproduction would be this codesandbox

Expected behavior

The component should mount, render with count 1, then after one second update to count 2

Actual behavior

The component mounts, renders with count 1, then after one second update to count 3. You can also observe that the component unmounts in between (the cleanup function of the useEffect runs, see the console log) and then mounts again (the effect runs again).

Context

react-query subscribes / unsubscribes observers when components mount, and this behavior can lead to bugs, like retries being cancelled if the observer unmounts in between. I could reproduce this with either the latest v3 version of react-query, where we subscribe / unsubscribe in a useEffect, as well as with the version that attempts to upgrade to useSyncExternalStorage.

Workarounds

Issue does not show up if:

  • you use ReactDOM.render instead of createRoot
  • you remove <React.StrictMode> from the sandbox

Related

not sure if this issue is really related, but I found it before opening this issue. It doesn't have much information in it though:

irinakk
irinakk
Nov
24
1 month ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

Bug: ESLint react-hooks/rules-of-hooks throw false positive error in unconditional for..of statement with array

React version: 17.0.0

Steps To Reproduce

  1. npx degit ryota-murakami/false-positive-reporoduction-eslint-reack-hook-rule repro
  2. cd repro
  3. yarn
  4. yarn lint

Link to code example: https://github.com/ryota-murakami/false-positive-reporoduction-eslint-reack-hook-rule

The current behavior

const App: React.FC = () => {
  const [count, setCount] = useState<State['count']>(0)
  const [selectedIndex, setSelectedIndex] = React.useState(0)
  const [selectedFloorIndex, setSelectedFloorIndex] = React.useState<number>(0)
  const [selectedTableIndex, setSelectedTableIndex] = React.useState<number>(0)
  const [selectedTabIndex, setSelectedTabIndex] = React.useState(0)
  const [isSubmitState, setSubmitState] = React.useState(false)
  const [isChangePage, setChangePage] = React.useState(false)
  const [changePageNumber, setChangePageNumber] = React.useState(0)
  for (const state of [
    selectedIndex,
    selectedFloorIndex,
    selectedTabIndex,
    selectedTabIndex,
    isSubmitState,
    isChangePage,
    changePageNumber,
    selectedTableIndex,
  ]) {
    useDebugValue(state) Rising error : ESLint: React Hook "useDebugValue" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render.(react-hooks/rules-of-hooks)
  }

The expected behavior

const App: React.FC = () => {
  const [count, setCount] = useState<State['count']>(0)
  const [selectedIndex, setSelectedIndex] = React.useState(0)
  const [selectedFloorIndex, setSelectedFloorIndex] = React.useState<number>(0)
  const [selectedTableIndex, setSelectedTableIndex] = React.useState<number>(0)
  const [selectedTabIndex, setSelectedTabIndex] = React.useState(0)
  const [isSubmitState, setSubmitState] = React.useState(false)
  const [isChangePage, setChangePage] = React.useState(false)
  const [changePageNumber, setChangePageNumber] = React.useState(0)
  for (const state of [
    selectedIndex,
    selectedFloorIndex,
    selectedTabIndex,
    selectedTabIndex,
    isSubmitState,
    isChangePage,
    changePageNumber,
    selectedTableIndex,
  ]) {
    useDebugValue(state) // ESLint doesn't say any thing
  }

Description

First of all, I would like to agree with the ReactTeam that fact, about this ESlint Error is false positive.
The for...of statement has no possibility to change the 'useDebugValue()' order number. Actually that code is running without any problem.

I'm not sure ESLint internally but that code behavior can be expect even with static analysis.
I guess this is fixable to improve the Rule implementation, isn't it?

Thank you for handling this issue, I really appreciate it! 🙂

irinakk
irinakk

I know this might be a little off topic, but by the given example, i think its ok to put it this way:

  useDebugValue([
    selectedIndex,
    selectedFloorIndex,
    selectedTabIndex,
    selectedTabIndex,
    isSubmitState,
    isChangePage,
    changePageNumber,
    selectedTableIndex,
  ])
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

React 18 It possible that automatic batching work when using await that like `await false`?

We often use async to implement asynchronous operations. But automatic batching dont work when using await that like await false .

example

irinakk
irinakk

@xiejay97 This comes from how you "schedules" the work. but why you want to batch those two updates? does the change of state trigger some slow rendering? if so, you can take a look at startTransition, or just make the synchronous work synchronous.

Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

Bug: Save "resolve" and "reject" to useState will let Promise auto resolved.

React version: 17.0.2

Steps To Reproduce

  1. create a Promise and save the resolve & reject function into state by useState

Link to code example: https://codesandbox.io/s/infallible-elbakyan-v63em?file=/src/App.tsx

The current behavior

The promise will be auto resolved

The expected behavior

The promise be resolved when I run resolve function.

Nov
23
1 month ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

React 18 It possible that automatic batching work when using await that like `await false`?

We often use async to implement asynchronous operations. But automatic batching dont work when using await that like await false .

example

Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

React 18 It possible that automatic batching work when using await that like `await false`?

We often use async to implement asynchronous operations. But automatic batching dont work when using await that like await false .

example

Nov
22
1 month ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

Bug: Use component inside itself

Hi when I write this code:

export default function Bug(props) {
    return (
        <Bug></Bug>
    )
}

it will cause crashes and my browser never responses on the page and the page progress indicator turns forever without any error or something else. and the whole page freezes:

Screenshot from 2021-11-22 11-21-35 Screenshot from 2021-11-22 11-22-30

I report it because I know React provides infinite loops, but here it crashes unexpectedly.

irinakk
irinakk

No, React does not "provides infinite loops". You'll need a base case for the recursion.

Nov
14
2 months ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

Bug: react-hooks/exhaustive-deps incorrectly considers synchronous access of outer scope that isn't in the dependency list to be a violation

React version: 17.0.2

Steps To Reproduce

  1. Implement the react-hooks/exhaustive-deps ESLint rule.
  2. Create a useEffect function that doesn't include synchronously accessed identifiers from the outer scope.

Link to code example: https://codesandbox.io/s/beautiful-kalam-q0dwu?file=/src/MyComponent.tsx

The current behavior

Consider this contrived example:

type Props = {
  trigger: boolean
  numbers: number[]
}

function MyComponent({trigger, numbers}: Props) {
  const [sum, setSum] = useState<number>()

  useEffect(() => {
    setSum(numbers.reduce((a, b) => a + b, 0))
  }, [trigger])

  return sum === undefined ? null : (
    <div>
      The sum of the numbers is {sum}.
    </div>
  )
}

The callback passed to useEffect always accesses the latest version of numbers, not a stale copy. This is because when trigger changes, the latest version of the callback is invoked, which closes over the latest version of numbers.

However, react-hooks/exhaustive-deps doesn't recognize that numbers is never stale when used in the callback. This rule could easily distinguish between safe and unsafe access: All synchronous accesses are safe. Asynchronous accesses are potentially unsafe. The easy way to distinguish between synchronous and asynchronous accesses is to look at whether the access is occurring directly in the function passed to useEffect (synchronous and safe) or within a function inside that function (asynchronous and potentially unsafe).

The react-hooks/exhaustive-deps rule provides good protection against stale references in useMemo and useCallback, but in both those hooks, the dependency list has only one purpose: Avoid stale references. The useEffect hook has an additional purpose: Trigger the effect callback. So the react-hooks/exhaustive-deps rule in its current form is not well suited to useEffect. This violation of the single responsibility principle causes countless bugs which react-hooks/exhaustive-deps often makes worse in its current form, by prompting developers to add items to the effect list that shouldn't trigger the effect.

The expected behavior

The react-hooks/exhaustive-deps rule should not consider synchronously accessed outer scope within the function passed to useEffect to be a violation.

irinakk
irinakk

The easy way to distinguish between synchronous and asynchronous accesses is to look at whether the access is occurring directly in the function passed to useEffect (synchronous and safe) or within a function inside that function (asynchronous and potentially unsafe). This is not true, because the source of the deps may be unknown.

If you don't rely on a dependency for updates, you can use an extra ref to store it.

Nov
11
2 months ago
Activity icon
fork

irinakk forked vitejs/vite

⚡ Next generation frontend tooling. It's fast!
irinakk MIT License Updated
fork time in 2 months ago
Nov
10
2 months ago
Activity icon
delete

irinakk in irinakk/react delete branch fix/ignore-ts-namespace

deleted time in 2 months ago
Oct
28
2 months ago
push

irinakk push irinakk/react

irinakk
irinakk

Enable 'Reload and Start Profiling' for Microsoft Edge (#22631)

irinakk
irinakk

Revert logic for checking for duplicate installations of DevTools (#22638)

  • Revert "Only show DevTools warning about unrecognized build in Chrome (#22571)"

This reverts commit b72dc8e9300f5ae997f7f5cfcd79b604cca3df0c.

  • Revert "Show warning in UI when duplicate installations of DevTools extension are detected (#22563)"

This reverts commit 930c9e7eeb4c9721e1b8dee074c2eef4d1eae5dc.

  • Revert "Prevent errors/crashing when multiple installs of DevTools are present (#22517)"

This reverts commit 545d4c2de7934a43b0c5d3ce050d77b4c3113bd3.

  • Remove all references to passing extensionId in postMessage

  • Keep build changes

  • lint

irinakk
irinakk

DevTools supports ENV-injected version for better internal bug reports (#22635)

irinakk
irinakk

[React Refresh] support typescript namespace syntax

irinakk
irinakk

[React Refresh] handle nested namespace

commit sha: 003b251b79afdabd682807fb19e862afc2a3f7c4

push time in 2 months ago
push

irinakk push irinakk/react

irinakk
irinakk

fixup! fixup! [React Refresh] handle nested namespace

commit sha: e8052d8ed0995f3de98482ea714072abecd65e29

push time in 2 months ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

Bug: Hook setState uses functional update, there is a counter in the function, the display will be incorrect

React version: 17.0.2

Steps To Reproduce

This is the code

import React, { useCallback, useEffect, useState } from "react";

export default function StateTest() {
  const [num, setNum] = useState(0);

  const jumpNum = useCallback(() => {
    let index = 0;
    setInterval(() => {
      setNum((num) => {
        if (index === 4) {
          index = 0;
          return 0;
        } else {
          ++index;
          console.log(index);
          return index;
        }
      });
    }, 1000);
  }, []);

  useEffect(() => {
    jumpNum();
  }, [jumpNum]);

  return (
    <div className="state-wrap">
      <div>{num}</div>
    </div>
  );
}

bug demo

The current behavior

Now it is 1 3 0 2 4..., console output is also incomplete

The expected behavior

Expected to display 0 1 2 3 0 1 2 3 ....

I put ++index outside setState , it is normal,If it’s not a bug, can you explain why it happened , thanks.

irinakk
irinakk

@aooy IMHO the doc is well written, but it might take time to fully understand. Those weird behaviours exposed under StrictMode might not do you any harm now, but by it prepares you for the coming concurrent rendering.

Oct
27
2 months ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

Bug: Hook setState uses functional update, there is a counter in the function, the display will be incorrect

React version: 17.0.2

Steps To Reproduce

This is the code

import React, { useCallback, useEffect, useState } from "react";

export default function StateTest() {
  const [num, setNum] = useState(0);

  const jumpNum = useCallback(() => {
    let index = 0;
    setInterval(() => {
      setNum((num) => {
        if (index === 4) {
          index = 0;
          return 0;
        } else {
          ++index;
          console.log(index);
          return index;
        }
      });
    }, 1000);
  }, []);

  useEffect(() => {
    jumpNum();
  }, [jumpNum]);

  return (
    <div className="state-wrap">
      <div>{num}</div>
    </div>
  );
}

bug demo

The current behavior

Now it is 1 3 0 2 4..., console output is also incomplete

The expected behavior

Expected to display 0 1 2 3 0 1 2 3 ....

I put ++index outside setState , it is normal,If it’s not a bug, can you explain why it happened , thanks.

irinakk
irinakk

This is just the case your setState updater is impure (which it should be) because of the "index" variable. the double-invoking wont make difference if your updater is pure : https://codesandbox.io/s/jolly-tess-cvt1x?file=/src/App.js (and be carefully using timers)

Oct
26
2 months ago
push

irinakk push irinakk/react

irinakk
irinakk

fixup! fixup! [React Refresh] add integration test for namespace support

commit sha: 36fb999f943b67f27064f2945153f615fe6ce96f

push time in 2 months ago
push

irinakk push irinakk/react

irinakk
irinakk

fixup! [React Refresh] add integration test for namespace support

commit sha: 141e80390dcc88b33ec6f36ab7568bd079292b6c

push time in 2 months ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

Bug: Hook setState uses functional update, there is a counter in the function, the display will be incorrect

React version: 17.0.2

Steps To Reproduce

This is the code

import React, { useCallback, useEffect, useState } from "react";

export default function StateTest() {
  const [num, setNum] = useState(0);

  const jumpNum = useCallback(() => {
    let index = 0;
    setInterval(() => {
      setNum((num) => {
        if (index === 4) {
          index = 0;
          return 0;
        } else {
          ++index;
          console.log(index);
          return index;
        }
      });
    }, 1000);
  }, []);

  useEffect(() => {
    jumpNum();
  }, [jumpNum]);

  return (
    <div className="state-wrap">
      <div>{num}</div>
    </div>
  );
}

bug demo

The current behavior

Now it is 1 3 0 2 4..., console output is also incomplete

The expected behavior

Expected to display 0 1 2 3 0 1 2 3 ....

I put ++index outside setState , it is normal,If it’s not a bug, can you explain why it happened , thanks.

irinakk
irinakk

No this is not a bug, this happens because StrictMode in development mode will double-invoking State updater functions (the first argument to setState). see: https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

push

irinakk push irinakk/react

irinakk
irinakk

[React Refresh] add integration test for namespace support

commit sha: 09ea81eb866d313038e51f1f754af4350536e11d

push time in 2 months ago
Activity icon
fork

irinakk forked petyosi/react-virtuoso

⚡ The most powerful virtual list component for React
irinakk MIT License Updated
fork time in 2 months ago
push

irinakk push irinakk/react

irinakk
irinakk

fixup! [React Refresh] handle nested namespace

commit sha: 28d6f14327b9cbbceec182f4f5c10bbcf36bd5f5

push time in 2 months ago
push

irinakk push irinakk/react

irinakk
irinakk

[React Refresh] handle nested namespace

commit sha: b0c315b214a274dcc5404c9c883199d293fc5e43

push time in 2 months ago
push

irinakk push irinakk/react

irinakk
irinakk

[React Refresh] support typescript namespace syntax

commit sha: f940f4b210f395cf08cb157ff37c22fd644488e0

push time in 2 months ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

[React Refresh] ignore typescript namespace syntax

This fixes #22413 The test demonstrates the cause of the issue, which before the fix, the output code will be:

namespace NS {
  export const A = () => {};
  _c = A;
  export function B() {};
  _c2 = B;
}

and after the fix, no registration will be set for namespace exports:

namespace NS {
  export const A = () => {};
  export function B() {};
}

As i explained in this comment, because of the wrong programPath, named function exports in namespaces got registered but never used. This error is exposed in vite because vite uses <script module> by default, and modules use strict mode automatically, and it treats the undefined _c an error.

Since typescript namespace will be transformed into an IIFE, the behaviour after fix is consistant with how react-refresh/babel handles IIFE.

irinakk
irinakk

@gaearon yes that makes sense, i was thinking of the IIFE output but organising components in namespace seems a recommended practice in typescript + react. I'll see if i can make it happen.

Oct
25
2 months ago
pull request

irinakk pull request facebook/react

irinakk
irinakk

[React Refresh] ignore typescript namespace syntax

This fixes #22413 The test demonstrates the cause of the issue, which before the fix, the output code will be:

namespace NS {
  export const A = () => {};
  _c = A;
  export function B() {};
  _c2 = B;
}

and after the fix, no registration will be set for namespace exports:

namespace NS {
  export const A = () => {};
  export function B() {};
}

As i explained in this comment, because of the wrong programPath, named function exports in namespaces got registered but never used. This error is exposed in vite because vite uses <script module> by default, and modules use strict mode automatically, and it treats the undefined _c an error.

Since typescript namespace will be transformed into an IIFE, the behaviour after fix is consistant with how react-refresh/babel handles IIFE.

Activity icon
created branch

irinakk in irinakk/react create branch fix/ignore-ts-namespace

createdAt 2 months ago
Oct
24
2 months ago
Activity icon
issue

irinakk issue comment facebook/react

irinakk
irinakk

fix: support typescript namespace

Summary

This PR is possible fix for #22413. It solves bug with namespace and vite. Related issue.

How did you test this change?

I created a simple app like mentioned in #22413 and then I applied the same changes directly in node_modules of this app. This change is solving mentioned issue.

irinakk
irinakk

@ideffix hi, i think this bug is about the plugin doesn't understand typescript syntax, so its not related to transform typescript. no need for adding @babel/preset-typescript, a test in ReactFreshBabelPlugin-test.js would be sufficient. I made a fix based on my comment here, i'd like to made a pr if this doesn't offend you.

Previous