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

Fix WorkoutIntervalInput React issues #410

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

morteako
Copy link
Collaborator

WorkoutIntervalInput had some issues due to calling the parent when rendering.
This was because the usage of the setWorkoutPart from the parent was not contained in useEffect.
This lead to warnings such as this:

WorkoutEditor.tsx:243 Warning: Cannot update a component (`WorkoutEditor`) while rendering a different component (`WorkoutIntervalInput`). To locate the bad setState() call inside `WorkoutIntervalInput`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render Error Component Stack
    at WorkoutIntervalInput (WorkoutIntervalInput.tsx:79:3)
    at div (<anonymous>)
    at chunk-XTFHVF2A.js?v=14ae4dba:1397:45
    at ChakraComponent (chunk-XTFHVF2A.js?v=14ae4dba:8474:35)
    at Draggable (react-beautiful-dnd.…?v=537c04d4:7953:39)
    at ConnectFunction (react-beautiful-dnd.js?v=537c04d4:848:48)
    at PrivateDraggable (react-beautiful-dnd.…?v=537c04d4:8242:26)
    at PublicDraggable (react-beautiful-dnd.…?v=537c04d4:8250:32)
    at DraggableItem (DraggableItem.tsx:10:33)
    at div (<anonymous>)
    at chunk-XTFHVF2A.js?v=14ae4dba:1397:45
    at ChakraComponent (chunk-XTFHVF2A.js?v=14ae4dba:8474:35)
    at chunk-OGF3B5P3.js?v=14ae4dba:342:5
    at Droppable (react-beautiful-dnd.…?v=537c04d4:8261:49)
    at ConnectFunction (react-beautiful-dnd.js?v=537c04d4:848:48)
    at Provider (react-beautiful-dnd.js?v=537c04d4:678:20)
    at App (react-beautiful-dnd.…?v=537c04d4:7082:25)
    at ErrorBoundary2 (react-beautiful-dnd.…?v=537c04d4:1579:35)
    at DragDropContext (react-beautiful-dnd.…?v=537c04d4:7202:19)
    at DraggableList (DraggableList.tsx:8:33)
    at div (<anonymous>)
    at chunk-XTFHVF2A.js?v=14ae4dba:1397:45
    at ChakraComponent (chunk-XTFHVF2A.js?v=14ae4dba:8474:35)
    at chunk-OGF3B5P3.js?v=14ae4dba:342:5
    at WorkoutEditor (WorkoutEditor.tsx:62:12)

Fixed by having the call in useEffect.
(That lead to a lot of rerenders, so add an if-check to just setTheWorkoutPart when it is actually changed)

Also removed the setWorkoutType from the actions, and just used the one from props

Not a React Expert, so it may be fixed in a better way. useMemo in the parent? IDK

Master (bug)

2024-10-17 21 22 50

This pr (no warning :) )

2024-10-17 21 21 34

Current setup created React warnings due to setState in rendering
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant