Infinite Render Loop causing "Maximum update depth exceeded"

[sekaiking]

Hello everyone.

I'm currently dealing with an unexpected issue on near.social that doesn't seem to happen on near.org.

To provide more context, upon visiting the link below on near.org and opening the developer console, it becomes clear that the proposals are rendered just once, as expected and everything working as expected: https://near.org/sking.near/widget/DAO.Page?daoId=multi.sputnik-dao.near&tab=proposals

However, an issue arises when visiting the page on near.social. Here, the proposals appear to be caught in an infinite render loop. As a result, React throws a "Maximum update depth exceeded" error which breaks the app: https://near.social/#/sking.near/widget/DAO.Page?daoId=multi.sputnik-dao.near&tab=proposals

I'm uncertain about the root cause. If anyone has encountered this before or has any ideas about what might be going wrong, your input would be highly valuable. Someone on telegram suggested that it may be related to https://github.com/NearSocial/VM/pull/54

Thanks in advance!

[sekaiking]

Thanks to @evgenykuzyakov, the problem and its solution have been identified:

The issue was that I was attempting to directly modify the proposal object from the props. This caused unintended behavior and resulted in an infinite re-render of the app. It worked on near.org previously because the props were automatically deep copied, but that changed after https://github.com/NearSocial/VM/pull/54.

The solution was to deep copy the 'proposal' object using JSON.parse(JSON.stringify(proposal)) before modifying it. This ensured that we are modifying a new copy of the object and not causing side effects on the original one.

I am closing this issue now, as it has been resolved.