Difference between rendered components and app state

[pepf]

I've been working on a small "notes" app and encounter the following issue when trying to implement "remove a note with id x feature". I believe the bug might be more generic than just my notes app (updating state? trigger re-renders?) but this is just an easy way to expose the behaviour.

Node version: v10.15.2
@nodegui/react-nodegui: 0.1.5,

Expected:
Pressing the trash icon next to a note triggers a state changes, returns an array without the given note. Therefore, the note disappears from the screen.

Observed behaviour:
As seen from the console.log statements, the note correctly disappears from state. Also the "counter" on top correctly reflects the amount of notes is going down by 1. The note itself however does not disappear from remove. Repeated clicks on this or other buttons at some point will just crash the app.

What I've tried
At first I thought it might have to do with passing the callbacks around which might not be supported from some reason. Based on the calculator example I refactored the notes app to useReducer() instead, so state is more centralised and predictable. This didn't seem to make any difference for this bug.

Diff with relevant code changes:
pepf/react-nodegui-starter@08560d5

Reproduction branch:
https://github.com/pepf/react-nodegui-starter/tree/notes-app

[elviosak]

i have a similar problem, when adding values to an array and using map to render Text elements, it doesnt get updated when adding or removing items, but it updates on next click(either adding or removing, but it stays one cycle behind), also updates if i click another button unrelated to the array..

this is my component (if the text on update button doesn't change it won't update)

const geometry = { x: 0, y: 100, width: 400, height: 600 };
function App() {
  const [update, setUpdate] = useState(true);
  const [textArr, setTextArr] = useState([]);
  const addItem = () => {
    const newText = Math.random()
      .toString(36)
      .substr(2, 5);
    setTextArr([...textArr, newText]);
  };
  const removeItem = () => {
    const newArr = Object.assign([], textArr);
    newArr.shift();
    setTextArr(newArr);
  };
  const updater = () => {
    setUpdate(!update);
  };
  return (
    <Window geometry={geometry} styleSheet={styleSheet}>
      <View>
        <Button
          on={{ clicked: updater }}
          text={update ? "update" : " update "}
        />
        <Button on={{ clicked: addItem }} text="Add Item" />
        <Button on={{ clicked: removeItem }} text="Remove Item" />
        <Text>{"stringified: " + JSON.stringify(textArr)}</Text>
        {textArr.map((txt) => (
          <Text key={txt}>{"text: " + txt}</Text>
        ))}
      </View>
    </Window>
  );
}

versions:

"@nodegui/nodegui": "^0.1.7",
"@nodegui/react-nodegui": "^0.1.6",

[a7ul]

This issue is now fixed in v0.1.9 of nodegui and react-nodegui

@pepf @slidinghotdog
Let me know if it fixes it after upgrading

[elviosak]

@master-atul its working great now, thanks!

[a7ul]

Awesome 🚀

[pepf]

Seems to work! 👌