Getting data in a functional component from a class in babylon

I am using babylon js with react and the main thing is to manupulate with data without any re-render, so I am using class to write all methods which change main object which works directly with canvas without re-render or using setState. Note that I use methods in class and pass them to canvas, so I have access to the main object because they are in the same file.

The problem I have now is getting the object out of the class and using it in functional component.

In the console you can clearly see that the object is changing on every added decal. So that array I should use outside of the class.

One of the thigs I tried is to use dispatch, but without any re-render it will just load initial object.

There should be a way to this so I would appreciate to any help.

There is my code.

@brianzinn is the react king around :slight_smile: as he wrote the babylon react library

As per the other discussion, I would remove those extra elements from the dependency array. The lint warnings are there as a guide, so you can remove them. I don’t quite understand yet why that was added as “best practice” to babylon docs, but that will certainly cause issues if you are re-rendering and generating new methods. You can also memoize your render method itself, if you wish to maintain that dependency array (look for useCallback hook).

edit: if that doesn’t answer your question then if you can be more clear in what you are trying to accomplish. like linking to files and line numbers.

1 Like

My goal here is to pull all placed decals from class to functional component so I can use them into UI. I want to display some of the properties of every added decal so I can manipulate with them, e.g. move, scale, remove. The only thing that I am not sure with is how to get the array of all decals out of the class.

well, i stopped using Redux a few years ago, but don’t you just use a reducer and add the decal as an event? redux uses the context, so it’s scope is outside of your functional components already. You could just use a selector to retrieve them.

I am adding decals in the class, so I cant use dispatch there, I cannot even provide dispatch as a prop because it’s not a component but set of methods for my canvas which I use outside to bring data into canvas. So im now looking for the way to pull data out of the class, and use them into my UI. So the established connection between the component and class would solve all my problems.

you can dispatch in an FC I think with useDispatch hook (again, I haven’t used redux since hooks came out). Also, your class can have a method to return it’s encapsulated data.