Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/neat-pumas-thank.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@lynx-js/react": patch
---

refactor: make `useEffect`, `useLayoutEffect` and `useImperativeHandle` no-op on the main thread
21 changes: 14 additions & 7 deletions packages/react/runtime/src/hooks/react.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import {
useDebugValue,
useErrorBoundary,
useId,
useImperativeHandle,
useMemo,
useEffect as usePreactEffect,
useState as usePreactState,
useImperativeHandle as usePreactUseImperativeHandle,
useReducer,
useRef,
} from 'preact/hooks';
Expand All @@ -20,6 +20,7 @@ import type { DependencyList, EffectCallback } from 'react';
import type { TraceOption } from '@lynx-js/types';

import { isProfiling, profileEnd, profileFlowId, profileStart } from '../debug/profile.js';
import { noop } from '../utils.js';

type GenericSetState = Dispatch<StateUpdater<unknown>>;

Expand Down Expand Up @@ -135,9 +136,11 @@ const useState: typeof usePreactState = isProfiling
*
* @public
*/
const useEffect: (effect: EffectCallback, deps?: DependencyList) => void = isProfiling
? useEffectProfiled
: usePreactEffect;
const useEffect: (effect: EffectCallback, deps?: DependencyList) => void = __BACKGROUND__
Comment thread
upupming marked this conversation as resolved.
? (isProfiling
? useEffectProfiled
: usePreactEffect)
: noop;

/**
* `useLayoutEffect` is now an alias of `useEffect`. Use `useEffect` instead.
Expand All @@ -151,9 +154,13 @@ const useEffect: (effect: EffectCallback, deps?: DependencyList) => void = isPro
*
* @deprecated `useLayoutEffect` in the background thread cannot offer the precise timing for reading layout information and synchronously re-render, which is different from React.
*/
const useLayoutEffect: (effect: EffectCallback, deps?: DependencyList) => void = isProfiling
? useLayoutEffectProfiled
: usePreactEffect;
const useLayoutEffect: (effect: EffectCallback, deps?: DependencyList) => void = __BACKGROUND__
? (isProfiling
? useLayoutEffectProfiled
: usePreactEffect)
: noop;

const useImperativeHandle: typeof usePreactUseImperativeHandle = __BACKGROUND__ ? usePreactUseImperativeHandle : noop;

export {
// preact
Expand Down
4 changes: 4 additions & 0 deletions packages/react/runtime/src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import type { ComponentClass } from 'preact';

import { getCurrentVNode, getOwnerStack } from './debug/component-stack.js';

/* v8 ignore start */
export const noop: (...args: unknown[]) => unknown = () => {};
/* v8 ignore end */

export function isDirectOrDeepEqual(a: any, b: any): boolean {
if (a === b) {
return true;
Expand Down
Loading