Module: hooks

Functions

prepareToUseHooks

▸ prepareToUseHooks(memorizedStates, rerenderFunction): void

This function should be called before a FunctionalFiber executes its fiberFunction. It will set a reference to the given memorizedStates and the function used to re-render this fiber, so those values can then be captured inside the corresponding functions when the useState and useEffect hooks are called in the fiberFunction.

Parameters

Name	Type	Description
memorizedStates	unknown[]	The memorizedStates, of the FunctionalFiber which this state belongs to.
rerenderFunction	() => void	The function which will re-render the fiber which this state belongs to.

Returns

void

Defined in

hooks.ts:13

---

useEffect

▸ useEffect(action, dependencies?): void

The function useEffect can be used in a functional component to execute an action, after a component has been rendered. By specifying dependencies, calling the function can be further restricted, to only call action under specific contidtions.

Example

const Counter = () => {
    const [count, setCount] = useState(0)

    // `action` is called after every render.
    useEffect(() => console.log('Counter changed.')) // no dependencies defined

    // `action` is called after every render, if the value of `count`
    // changed since the last render.
    useEffect(() => console.log('Counter changed.'), [count]) // specific dependency defined

    // `action` is called only after the first render.
    useEffect(() => console.log('Counter changed.'), []) // empty array dependency

    return <button onClick={() => setCount(count + 1)}>{`Count: ${count}`}</button>
}

Parameters

Name	Type	Description
action	() => void	The action to execute after rendering the component.
dependencies?	unknown[]	Defines the dependencies that decide on execution of action. action will only be called if any of the value in the dependencies has changed since the last render of the component. Pass an empty array ([]) to only run action on the first render. Pass undefined (or leave away the parameter) to run action on every render.

Returns

void

Defined in

hooks.ts:91

---

useState

▸ useState<T>(initialValue): [T, (newValue: T) => void]

The function useState can be used inside a functional component to capture state between re-rerenders. State values should never be mutated directly, but always updated via the returned setState function (2nd element in the array). This will trigger a re-render of the FunctionalFiber and its subtree (children).

Example

const Counter = () => {
    const [count, setCount] = useState(0)
    return <button onClick={() => setCount(count + 1)}>{`Count: ${count}`}</button>
}

Type parameters

Name
T

Parameters

Name	Type	Description
initialValue	T	The initial value the state should have.

Returns

[T, (newValue: T) => void]

An array containing the state as the first element and the setState function as the second element.

Defined in

hooks.ts:37