[React Native] MobX + FlatList кто использует такую связку?

[Aetae]

но ведь сам рендер вызывается однократно, если в коде синхронно поменялось и то и другое и третье, так что не проблема

Ну так ващет нет. Три изменения - три рендера и будет. Если не больше.

[ksa]

test.data.arr = [...test.data.arr, newItem]

А вот такое сработало!

import {makeAutoObservable} from 'mobx'

class Test {
	data = {
		arr: [
		    {id: '0', name: 'Item 0'},
		    {id: '1', name: 'Item 1'},
		    {id: '2', name: 'Item 2'},
		]
	}
	constructor(props) {
		makeAutoObservable(this)
	}
	add(obj) {
	    //this.data.arr.push(obj)
	    this.data.arr = [...this.data.arr, obj]
	}
}

export default new Test()

С этим работает и так.

import React from "react"
import { StyleSheet, Text, View, Button, FlatList } from 'react-native'
import { observer} from 'mobx-react-lite'
import { toJS, runInAction } from "mobx"

import test from '../store/test'

function Test() {
	const renderItem = ({ item }) => (
	    <Text>{item.name}</Text>
	)

	return (
	    <View style={styles.container}>
    	    <View style={styles.tab}>
    	        <Button
    	            title='Add'
    	            onPress={add}
    	        />
    	    </View>
            <FlatList
                data={test.data.arr}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />
	    </View>
	)
    function add() {
        const l = test.data.arr.length
        test.add({
            id: l.toString(),
            name: 'Item ' + l
        })
    }
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		color: '#000',
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
	tab: {
	    margin: 70
	}
})

export default observer(Test)

[Alexandroppolus]

Ну так ващет нет. Три изменения - три рендера и будет. Если не больше.

вот накидал пример.
по кнопке случается все 3 вида изменений - две замены стейта, значение в пропсе, наблюдаемое значение в сторе. Перерендер один - он, похоже, идет следующим микротаском, потому что если store.func() обернуть в микротаск, то уже будет 2 рендера.

в общем, реакт с мобиксом не так уж плохи

import { makeObservable, observable, action } from 'mobx'
import React, { useState } from 'react'
import { observer } from 'mobx-react-lite'

class Store {
  constructor() {
    makeObservable(this)
  }

  @observable a = 1

  @observable b = 2

  @action func() {
    this.a += 1
    this.b += 1
  }
}

const store = new Store()

const Comp: React.FC<{ a: number }> = observer(({ a }) => {
  const [c, setC] = useState(3)
  const [d, setD] = useState(4)
  console.log('*** render Comp ', a, store.b, c, d)

  const handler = () => {
    setC(c + 1)
    setD(d + 1)
    // Promise.resolve().then(() => store.func())
    store.func()
  }

  return (
    <div>
      <div>{`a = ${a}, store.b = ${store.b}, c = ${c}, d = ${d}`}</div>
      <button type="button" onClick={handler}>
        change
      </button>
    </div>
  )
})

export const App: React.FC = observer(() => {
  console.log('*** render App')
  return <Comp a={store.a} />
})

[Alexandroppolus]

...код.....

Cannot call a class as a function

попробуй заимпортировать так:
import { observer} from 'mobx-react'

ещё поправки, для чистоты эксперимента:

const MobxFlatList = observer(FlatList)
это вынеси наружу из function Test()

const renderItem = ...
тоже вынеси

функцию для keyExtractor тоже вынеси отдельно наружу

[ksa]

Alexandroppolus, я все это "запишу себе в книжечка"... (с)
Мало ли когда пригодится.

Больше устроил вариант с другим подходом собственно изменения массива.