Skip to content

Bug: FunctionComponent re-render phase cause a bug #20675

@careyke

Description

@careyke

React version:v17.0.1

Steps To Reproduce

There maybe be a bug in following method

function updateEffectImpl(fiberFlags, hookFlags, create, deps): void {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  let destroy = undefined;

  if (currentHook !== null) {
    const prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;
    if (nextDeps !== null) {
      const prevDeps = prevEffect.deps;
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }

  currentlyRenderingFiber.flags |= fiberFlags;

  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    destroy,
    nextDeps,
  );
}

Link to the source code:

function updateEffectImpl(fiberFlags, hookFlags, create, deps): void {

Link to code example: https://codesandbox.io/s/reacthooks-fkihz?file=/src/MaybeABug.js

The current behavior

The first time click the button, it will not print the "effect"
But the second click will print the "effect"
the third will not, the fourth will be and so on

The expected behavior

Maybe should always print nothing!

Remarks

The reason for this phenomenon is when component entering re-render phase, the effect object is a big different in updateQueue and Hook object. But i think should be consistent。

In fact, i am not sure if it is a bug, so I look forward to receiving a reply, thanks

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions