react-component / react-component/motion

Cannot update a component (HotReload) while rendering a different component (CSSMotion). To locate the bad setState() call inside CSSMotion, follow the stack trace as described in https://react.dev/link/setstate-in-render

Open
#56 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
178
Forks
51
PR merge metrics
No merged PRs in 30d

Description

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch rc-motion@2.9.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/rc-motion/es/CSSMotion.js b/node_modules/rc-motion/es/CSSMotion.js
index c75a051..364992e 100644
--- a/node_modules/rc-motion/es/CSSMotion.js
+++ b/node_modules/rc-motion/es/CSSMotion.js
@@ -56,6 +56,7 @@ export function genCSSMotion(config) {
         return null;
       }
     }
+
     var _useStatus = useStatus(supportMotion, visible, getDomElement, props),
       _useStatus2 = _slicedToArray(_useStatus, 4),
       status = _useStatus2[0],
@@ -120,14 +121,21 @@ export function genCSSMotion(config) {
 
     // Auto inject ref if child node not have `ref` props
     if ( /*#__PURE__*/React.isValidElement(motionChildren) && supportRef(motionChildren)) {
-      var _ref = motionChildren,
-        originNodeRef = _ref.ref;
-      if (!originNodeRef) {
-        motionChildren = /*#__PURE__*/React.cloneElement(motionChildren, {
-          ref: setNodeRef
-        });
-      }
+      const originNodeRef = motionChildren.ref;
+
+      motionChildren = React.cloneElement(motionChildren, {
+        ref: (node) => {
+          // Assign the ref in a callback function to avoid modifying state during render
+          setNodeRef(node);
+          if (typeof originNodeRef === 'function') {
+            originNodeRef(node);
+          } else if (originNodeRef) {
+            originNodeRef.current = node;
+          }
+        },
+      });
     }
+
     return /*#__PURE__*/React.createElement(DomWrapper, {
       ref: wrapperNodeRef
     }, motionChildren);

This issue body was partially generated by patch-package.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the source corresponding to node_modules/rc-motion/es/CSSMotion.js and reproduce the React warning during rendering. Compare the reported patch with the project source and verify that the warning no longer occurs; the payload does not name a test file, so identify the relevant existing motion tests before making changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.