19 replies

Atom with array does not update react components

any obvious reason my react component is not re-rendering when I update the atom? is this because the atom is holding an array?

// flamework controller...
private _alerts: Charm.Atom<AlertContext[]>

updateMethod(alert) {
    const t = this._alerts();
    t.push(alert);
    this._alerts(t);
}

// flamework controller...
private _alerts: Charm.Atom<AlertContext[]>

updateMethod(alert) {
    const t = this._alerts();
    t.push(alert);
    this._alerts(t);
}

// react component...
const c = ( props: { alerts: Charm.Atom<AlertContext[]> }) => {
    const alerts = useAtom(props.alerts);

    useEffect(() => {
        print("the state changed") // does not print on calls to updateMethod
    }, alerts)
}

// react component...
const c = ( props: { alerts: Charm.Atom<AlertContext[]> }) => {
    const alerts = useAtom(props.alerts);

    useEffect(() => {
        print("the state changed") // does not print on calls to updateMethod
    }, alerts)
}

Solution

private _alerts: Charm.Atom<AlertContext[]>

updateMethod(alert) {
    const t = this._alerts((old) => {
        return sift.Array.push(old, alert)
    });
}

private _alerts: Charm.Atom<AlertContext[]>

updateMethod(alert) {
    const t = this._alerts((old) => {
        return sift.Array.push(old, alert)
    });
}

Jump to solution

Atom with array does not update react components

Similar Threads