search

hasin-zaman / UIlex

A repository of unique React JavaScript components
https://uilex.vercel.app
MIT License
3 stars 10 forks source link

State change not being detected or button re rendering in framer motion #35

Open hasin-zaman opened 2 weeks ago

hasin-zaman commented 2 weeks ago

In my /buttons/loading-button I am adding a new ComponentAndCodeTabs.jsx component that uses framer motion. Inside one of the tabs is loading button that uses a handleClick function to simulate loading. This loading button is working fine outside of ComponentAndCodeTabs.jsx component. Inside it either state change is not being detected or on state change component is rerendering unable to show any loading when button is clicked. Help required from someone who understands framer motion or frontend dev well!

Govindggupta commented 2 weeks ago

Ohk i understood what kind of error you are facing in this , I've checked that . So I would like to try to solve this error and will let you know if i am able to solve this problem . Ohk @hasin-zaman?

Govindggupta commented 2 weeks ago

Hey! @hasin-zaman I was trying to resolve this for very long but there wasn't any change . So I tried building it from scratch , and is working properly , but isn't similar the design you made . I am sharing you the video of how does it looks and If is looking as per your requirement tell me I'll do the PR . Let me know if any changes are required !

https://github.com/user-attachments/assets/e33fca66-5d47-4f61-ab86-0bfa430ea6a8

hasin-zaman commented 1 week ago

Hey this is pretty great @Govindggupta ! I'm leaving issue open though for now and I'm also gonna try to figure out the problem myself. We can then consider implementing a different component such as yours. Thanks for helping out!

Govindggupta commented 1 week ago

Ohk @hasin-zaman I'll be waiting for you response and please let me also know what was the error , If you resolve it .

KristijanVugrinec commented 1 week ago

Hello there, I took a look at your code, and the problem is in the tabs.jsx file. When you change the prop of FadeInDiv tabs={propTabs}, the button works, but the animation of tabs doesn't. I couldn't solve it completely, but I hope this helps.

hasin-zaman commented 1 week ago

@KristijanVugrinec Thanks for identifying the problem. It helped a lot!

hasin-zaman commented 1 week ago

@Govindggupta So the issue was with tabs being used as state itself and so whenever component passed to one of the tabs changes state that change is detected in tabs too and tabs are rerendered. I partially solved the issue by isolating component from the tabs using React.createPortal. However, there is added overhead since we have to rerender component every time our component's tab is active.