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
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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