Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calling setNodes doesn't update nodes - Trying to make a Node height dynamic based on textarea input size #43

Closed
Vadorequest opened this issue Feb 4, 2021 · 6 comments

Comments

@Vadorequest
Copy link
Contributor

I'm submitting a...

[x] Bug report

I'm trying to make a node height update when the height of the textarea changes.

Video walkthrough: https://youtu.be/Ar_SKdDnAz8

image

image

Implementation of updateCurrentNode: https://github.com/Vadorequest/poc-nextjs-reaflow/blob/repro-textarea-dyn-height/src/components/PlaygroundContainer.tsx#L97-L113

Current behavior

Calling setNodes doesn't seem to update nodes every time. Sometimes it's "updated" (but the UI doesn't reflect the change, though).

I can't tell if it's a react issue (like, my code), or something related to Reaflow itself. What's weirdest is that the re-render doesn't propagate to children component (EditorContainer renders, but PlaygroundContainer doesn't seem so, but I can't explain why)

Also, I wonder if there is a utility function to update an existing node in an array of nodes.
I couldn't find any example/demo on how to do that.

I wonder if I need to use an actual state manager to avoid those kinds of issues.

Expected behavior

The state should update in EditorContainer every time the height of the textarea changes, and it should re-render all children components and recalculate the position of all the elements in the Canvas.

Minimal reproduction of the problem with instructions

Run locally:

  • git clone https://github.com/Vadorequest/poc-nextjs-reaflow.git
  • cd poc-nextjs-reaflow && git checkout repro-textarea-dyn-height
  • yarn && yarn start
@amcdnl
Copy link
Member

amcdnl commented Feb 4, 2021

What version of reaflow?

@Vadorequest
Copy link
Contributor Author

Vadorequest commented Feb 4, 2021

The latest, but I've just found the reason, I was modifying the React nodes state directly, and this somehow broke everything down. Using a deep clone of the value fixed it.

Vadorequest/rwa-faunadb-reaflow-nextjs-magic@dc70de1#diff-2fcc53b3c197ff40b96e4baaa33d509183b5050d2f516e0bdf983beb4a3ca505R109

@amcdnl
Copy link
Member

amcdnl commented Feb 5, 2021

Yes - it should be immutable in order for CD to work.

@Vadorequest
Copy link
Contributor Author

Yeah, using Recoil thrown an error when trying to set the readonly nodes and made the issue obvious, unlike the native React.useState which didn't complain but didn't work.

@Vadorequest
Copy link
Contributor Author

Yes - it should be immutable in order for CD to work.

@amcdnl What does CD means here? 🤔

@amcdnl
Copy link
Member

amcdnl commented Mar 1, 2021

change detection

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants