Skip to content

Subscribing to LegendState changes: Flatlist works, Legendlist doesn't #496

Description

@OriWritesAPlugin

First off, many thanks for your work on both State and List!

For the issue: I have a list of items a user can add to, shown below as a to-do list. I would like to use a LegendState store to access and persist them. This works with FlatList, user hits the button, a new entry appears. LegendList displays the initial entry, but doesn't update when the button is hit. However, if I switch to useState instead of observable(), LegendList (and Flatlist) work.

Versions:

├── @legendapp/list@3.3.2
├── @legendapp/state@3.0.0-beta.47

Reproducer

type TodoReproEntry = {"text": string, "id": string}
interface TodoListRepro { todos: TodoReproEntry[]; addTodo: () => void; }
// Create a global observable for the Todos
const todoRepro = observable<TodoListRepro>({
  todos: [
    {"text": "This is an example of a to-do", "id": "todo0"},
],
  addTodo: () => {
    const todo: TodoReproEntry = { text: "success", id: "todo"+todoRepro.todos.length};
    todoRepro.todos.push(todo);
  },
});

const TodoList = observer(()=>{

  const listItems = useValue(todoRepro.todos.get());

  return (
  <>
    <FlatList
      keyExtractor = {item => item.id} 
      data={listItems}
      renderItem={({ item }) => <Text>{item.text }</Text>}
    />
    <Pressable onPress={(_)=>{todoRepro.addTodo()}}>
      <Text>add entry</Text>
    </Pressable>
  </>
  );
});

export default TodoList

Behavior:

  1. Above setup, using Flatlist: click "add entry", the word "success" is appended as many times as you click the button
  2. Above setup, replace "Flatlist" with "LegendList": click "add entry", the word success does NOT appear

Check to make sure I'm not using LegendList wrong (at least in an obvious way):

Replace listItems with the below, update the onPress to use addNew()

  const [listItems, setListItems] = useState( [ {"text": "This is an example of a to-do", "id": "todo0"}]);
  const addNew = ()=>{ setListItems([...listItems, { text: "success", id: "todo"+listItems.length}]); }

Behavior:

  1. Using Flatlist: Works
  2. Using LegendList: Works

Very open to this being PEBKAC, though if so I'd ask a note be added to the Legendlist docs (ex: here) about gotchas in using state if they're not quite 1:1. Thanks for taking a look!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions