useStateJSArray

External Documentation

StateHookJSArray<T> useStateJSArray<T extends JSAny>(

  1. JSAny? initialValue

)

Adds local state for lists of JS objects to a function component.

Use this instead of useState when state is a list of JS objects (like List<JSObject>). This avoids type conversion issues.

Example:

final tasksState = useStateJSArray<JSObject>(<JSObject>[].toJS);
final tasks = tasksState.value; // List<JSObject>
tasksState.set([...tasks, newTask]);
tasksState.setWithUpdater((prev) => [...prev, newTask]);

Implementation

StateHookJSArray<T> useStateJSArray<T extends JSAny>(JSAny? initialValue) {
  final result = React.useState(initialValue);
  final jsValue = result[0];
  final setter = switch (result[1]) {
    final JSFunction fn => fn,
    _ => throw StateError('useState setter is not a function'),
  };
  final jsArray = switch (jsValue) {
    final JSArray arr => arr,
    _ => null,
  };
  final value = _jsArrayToList<T>(jsArray);
  return StateHookJSArray._(value, (v) => setter.callAsFunction(null, v));
}