} */
let afterPaintEffects = [];
let EMPTY = [];
@@ -180,16 +180,49 @@ export function useReducer(reducer, initialState, init) {
];
hookState._internal = currentInternal;
- currentInternal._component.shouldComponentUpdate = () => {
- if (!hookState._nextValue) return true;
-
- const currentValue = hookState._value[0];
- hookState._value = hookState._nextValue;
- hookState._nextValue = undefined;
-
- return currentValue !== hookState._value[0];
- };
+ if (!currentInternal.data._hasScuFromHooks) {
+ currentInternal.data._hasScuFromHooks = true;
+ const prevScu = currentInternal._component.shouldComponentUpdate;
+
+ // This SCU has the purpose of bailing out after repeated updates
+ // to stateful hooks.
+ // we store the next value in _nextValue[0] and keep doing that for all
+ // state setters, if we have next states and
+ // all next states within a component end up being equal to their original state
+ // we are safe to bail out for this specific component.
+ currentInternal._component.shouldComponentUpdate = function(p, s, c) {
+ if (!hookState._internal.data.__hooks) return true;
+
+ const stateHooks = hookState._internal.data.__hooks._list.filter(
+ x => x._internal
+ );
+ const allHooksEmpty = stateHooks.every(x => !x._nextValue);
+ // When we have no updated hooks in the component we invoke the previous SCU or
+ // traverse the VDOM tree further.
+ if (allHooksEmpty) {
+ return prevScu ? prevScu.call(this, p, s, c) : true;
+ }
+ // We check whether we have components with a nextValue set that
+ // have values that aren't equal to one another this pushes
+ // us to update further down the tree
+ let shouldUpdate = false;
+ stateHooks.forEach(hookItem => {
+ if (hookItem._nextValue) {
+ const currentValue = hookItem._value[0];
+ hookItem._value = hookItem._nextValue;
+ hookItem._nextValue = undefined;
+ if (currentValue !== hookItem._value[0]) shouldUpdate = true;
+ }
+ });
+
+ return shouldUpdate
+ ? prevScu
+ ? prevScu.call(this, p, s, c)
+ : true
+ : false;
+ };
+ }
}
return hookState._nextValue || hookState._value;
@@ -359,6 +392,7 @@ export function useErrorBoundary(cb) {
function flushAfterPaintEffects() {
let internal;
while ((internal = afterPaintEffects.shift())) {
+ if (!internal.data.__hooks) continue;
if (~internal.flags & MODE_UNMOUNTING) {
try {
internal.data.__hooks._pendingEffects.forEach(invokeCleanup);
diff --git a/hooks/test/browser/useState.test.js b/hooks/test/browser/useState.test.js
index 771a96ada1..64b5e59af8 100644
--- a/hooks/test/browser/useState.test.js
+++ b/hooks/test/browser/useState.test.js
@@ -1,4 +1,4 @@
-import { act, setupRerender } from 'preact/test-utils';
+import { setupRerender, act } from 'preact/test-utils';
import { createElement, render, createContext } from 'preact';
import { useState, useContext, useEffect } from 'preact/hooks';
import { setupScratch, teardown } from '../../../test/_util/helpers';
@@ -55,7 +55,7 @@ describe('useState', () => {
let lastState;
let doSetState;
- const Comp = sinon.spy(function Comp() {
+ const Comp = sinon.spy(() => {
const [state, setState] = useState(0);
lastState = state;
doSetState = setState;
@@ -81,7 +81,7 @@ describe('useState', () => {
let lastState;
let doSetState;
- const Comp = sinon.spy(function Comp() {
+ const Comp = sinon.spy(() => {
const [state, setState] = useState(0);
lastState = state;
doSetState = setState;
@@ -176,26 +176,6 @@ describe('useState', () => {
expect(scratch.innerHTML).to.equal('hi
');
});
- it('should render a second time when the render function updates state', () => {
- const calls = [];
- const App = () => {
- const [greeting, setGreeting] = useState('bye');
-
- if (greeting === 'bye') {
- setGreeting('hi');
- }
-
- calls.push(greeting);
-
- return {greeting}
;
- };
-
- render(, scratch);
- expect(calls.length).to.equal(2);
- expect(calls).to.deep.equal(['bye', 'hi']);
- expect(scratch.textContent).to.equal('hi');
- });
-
it('should handle queued useState', () => {
function Message({ message, onClose }) {
const [isVisible, setVisible] = useState(Boolean(message));
@@ -232,6 +212,89 @@ describe('useState', () => {
expect(scratch.innerHTML).to.equal('');
});
+ it('should render a second time when the render function updates state', () => {
+ const calls = [];
+ const App = () => {
+ const [greeting, setGreeting] = useState('bye');
+
+ if (greeting === 'bye') {
+ setGreeting('hi');
+ }
+
+ calls.push(greeting);
+
+ return {greeting}
;
+ };
+
+ act(() => {
+ render(, scratch);
+ });
+ expect(calls.length).to.equal(2);
+ expect(calls).to.deep.equal(['bye', 'hi']);
+ expect(scratch.textContent).to.equal('hi');
+ });
+
+ // https://github.com/preactjs/preact/issues/3669
+ it('correctly updates with multiple state updates', () => {
+ let simulateClick;
+ function TestWidget() {
+ const [saved, setSaved] = useState(false);
+ const [, setSaving] = useState(false);
+
+ simulateClick = () => {
+ setSaving(true);
+ setSaved(true);
+ setSaving(false);
+ };
+
+ return {saved ? 'Saved!' : 'Unsaved!'}
;
+ }
+
+ render(, scratch);
+ expect(scratch.innerHTML).to.equal('Unsaved!
');
+
+ act(() => {
+ simulateClick();
+ });
+
+ expect(scratch.innerHTML).to.equal('Saved!
');
+ });
+
+ // https://github.com/preactjs/preact/issues/3674
+ it('ensure we iterate over all hooks', () => {
+ let open, close;
+
+ function TestWidget() {
+ const [, setCounter] = useState(0);
+ const [isOpen, setOpen] = useState(false);
+
+ open = () => {
+ setCounter(42);
+ setOpen(true);
+ };
+
+ close = () => {
+ setOpen(false);
+ };
+
+ return {isOpen ? 'open' : 'closed'}
;
+ }
+
+ render(, scratch);
+ expect(scratch.innerHTML).to.equal('closed
');
+
+ act(() => {
+ open();
+ });
+
+ expect(scratch.innerHTML).to.equal('open
');
+
+ act(() => {
+ close();
+ });
+ expect(scratch.innerHTML).to.equal('closed
');
+ });
+
it('does not loop when states are equal after batches', () => {
const renderSpy = sinon.spy();
const Context = createContext(null);
diff --git a/src/index.d.ts b/src/index.d.ts
index bfbb7bfdf3..0aca917a6e 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -183,11 +183,35 @@ export abstract class Component {
// -----------------------------------
export function createElement(
+ type: 'input',
+ props:
+ | (JSXInternal.DOMAttributes &
+ ClassAttributes)
+ | null,
+ ...children: ComponentChildren[]
+): VNode;
+export function createElement<
+ P extends JSXInternal.HTMLAttributes,
+ T extends HTMLElement
+>(
+ type: keyof JSXInternal.IntrinsicElements,
+ props: (ClassAttributes & P) | null,
+ ...children: ComponentChildren[]
+): VNode;
+export function createElement<
+ P extends JSXInternal.SVGAttributes,
+ T extends HTMLElement
+>(
+ type: keyof JSXInternal.IntrinsicElements,
+ props: (ClassAttributes & P) | null,
+ ...children: ComponentChildren[]
+): VNode;
+export function createElement(
type: string,
props:
- | (JSXInternal.HTMLAttributes &
- JSXInternal.SVGAttributes &
- Record)
+ | (ClassAttributes &
+ JSXInternal.HTMLAttributes &
+ JSXInternal.SVGAttributes)
| null,
...children: ComponentChildren[]
): VNode;
@@ -201,11 +225,35 @@ export namespace createElement {
}
export function h(
+ type: 'input',
+ props:
+ | (JSXInternal.DOMAttributes &
+ ClassAttributes)
+ | null,
+ ...children: ComponentChildren[]
+): VNode;
+export function h<
+ P extends JSXInternal.HTMLAttributes,
+ T extends HTMLElement
+>(
+ type: keyof JSXInternal.IntrinsicElements,
+ props: (ClassAttributes & P) | null,
+ ...children: ComponentChildren[]
+): VNode;
+export function h<
+ P extends JSXInternal.SVGAttributes,
+ T extends HTMLElement
+>(
+ type: keyof JSXInternal.IntrinsicElements,
+ props: (ClassAttributes & P) | null,
+ ...children: ComponentChildren[]
+): VNode;
+export function h(
type: string,
props:
- | (JSXInternal.HTMLAttributes &
- JSXInternal.SVGAttributes &
- Record)
+ | (ClassAttributes &
+ JSXInternal.HTMLAttributes &
+ JSXInternal.SVGAttributes)
| null,
...children: ComponentChildren[]
): VNode;
@@ -224,7 +272,7 @@ export namespace h {
export function render(
vnode: ComponentChild,
- parent: Element | Document | ShadowRoot | DocumentFragment,
+ parent: Element | Document | ShadowRoot | DocumentFragment
): void;
export function hydrate(
vnode: ComponentChild,
diff --git a/test/ts/preact.tsx b/test/ts/preact.tsx
index 9779d41770..ad39d4bfc4 100644
--- a/test/ts/preact.tsx
+++ b/test/ts/preact.tsx
@@ -5,7 +5,8 @@ import {
ComponentProps,
FunctionalComponent,
AnyComponent,
- h
+ h,
+ createRef
} from '../../';
interface DummyProps {
@@ -295,3 +296,20 @@ let elementProps: ComponentProps<'button'> = {
// Typing of style property
const acceptsNumberAsLength = ;
const acceptsStringAsLength = ;
+
+// Refs should work on elements
+const ref = createRef();
+createElement('div', { ref: ref }, 'hi');
+h('div', { ref: ref }, 'hi');
+
+// Refs should work on functions
+const functionRef = createRef();
+const RefComponentTest = () => hi
;
+createElement(RefComponentTest, { ref: functionRef }, 'hi');
+h(RefComponentTest, { ref: functionRef }, 'hi');
+
+// Should accept onInput
+const onInput = (e: h.JSX.TargetedEvent) => {};
+;
+createElement('input', { onInput: onInput });
+h('input', { onInput: onInput });