sivertschou / dundring

dundring.com is a free and open source in-browser training application created to control and track your training with a smart bike trainer⚡️
https://dundring.com
Apache License 2.0
62 stars 8 forks source link

Fix WorkoutIntervalInput React issues #410

Open morteako opened 1 month ago

morteako commented 1 month ago

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