Skip to content

Fix WorkoutIntervalInput React issues#410

Open
morteako wants to merge 2 commits intomainfrom
fix-intervalinput-react-issues
Open

Fix WorkoutIntervalInput React issues#410
morteako wants to merge 2 commits intomainfrom
fix-intervalinput-react-issues

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