question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`Konva` may lost ids reference while react reconciler works

See original GitHub issue

Caught on a large production web app.

Try update this structures:

layer
 -> shape with id1
 -> shape with id2

To this:

layer
  group
    -> shape with id1
    -> shape with id2

Then try to find a node by id from a stage.

In this case, React will:

  1. create new elements (group and shapes)
  2. delete old shapes
  3. insert new group and shapes

So new shapes will be created BEFORE old shapes are destroyed. That means same id will be used twice. In this scenario, Konva will lose references to new shapes by ids. So this code stage.find('#id1') will return undefined. That is the bug. So direct searching of nodes is broken.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:5
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
lavrtoncommented, Mar 23, 2019

Should be fixed. konva@3.2.2 is using a new container.find('#id') algorithm that should not produce such weird results.

1reaction
rabiulislamanikcommented, Dec 27, 2018

screenshot from 2018-12-27 12-48-01

how about using ‘name’ like this ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How React Reconciliation Works | CSS-Tricks
Reconciliation is the process through which React updates the DOM. When a component's state changes, React has to calculate if it is necessary ......
Read more >
MobX Quick Start Guide
jQuery, konva.js, Next.js, Vue.js, and even Backbone. When working through the book, you will discover that the concepts required to use a tool...
Read more >
Untitled
#Datdudebp 911 first responders gamespot, Eating meat during lent rules! Leotards australia ballet, Staropoli law offices llc, Mat2riel de cuisine, ...
Read more >
开发工具 - 超级架构师
node-video-lib - Pure JavaScript library for working with MP4 and FLV video files and creating MPEG-TS chunks for HLS streaming. basic-ftp – FTP/FTPS...
Read more >
comments
Hi HN,. I am the developer behind SpreadSheet Grid. It's a React Library for users who want to develop an Excel-like DataGrid in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found