useArrayReduce

Category

Array

Export Size

156 B

Last Changed

5 days ago

Reactive Array.reduce.

Demo

Usage

import { useArrayReduce } from '@reause/shared'

const sum = useArrayReduce([1, 2, 3], (sum, val) => sum + val) // 6

Use with reactive array

import { useArrayReduce } from '@reause/shared'
import { useState } from 'react'

const [list, setList] = useState([1, 2])
const sum = useArrayReduce(list, (sum, val) => sum + val) // 3

setList([...list, 3])
// sum: 6 on the next render

Use with initialValue

import { useArrayReduce } from '@reause/shared'
import { useState } from 'react'

const [list, setList] = useState([{ num: 1 }, { num: 2 }])
const sum = useArrayReduce(list, (sum, val) => sum + val.num, 0) // 3

setList([...list, { num: 3 }])
// sum: 6 on the next render

list holds plain values only: pass a plain array (e.g. from useState), not an array of refs and not a getter — upstream's ref-element list input has no React equivalent here. Pass a new array to recompute on the next render.

Type Declarations

export type UseArrayReducer<PV, CV, R> = (previousValue: PV, currentValue: CV, currentIndex: number) => R

export type UseArrayReduceReturn<T = any> = T

export function useArrayReduce<T>(list: readonly T[], reducer: UseArrayReducer<T, T, T>): UseArrayReduceReturn<T>

export function useArrayReduce<T, U>(list: readonly T[], reducer: UseArrayReducer<U, T, U>, initialValue: U | (() => U)): UseArrayReduceReturn<U>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

bf5df - fix(shared): resolve useArrayReduce audit findings (#726)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)