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

Warning: findDOMNode is deprecated in StrictMode. #893

Open
shanhai3000 opened this issue Oct 20, 2023 · 5 comments
Open

Warning: findDOMNode is deprecated in StrictMode. #893

shanhai3000 opened this issue Oct 20, 2023 · 5 comments

Comments

@shanhai3000
Copy link

shanhai3000 commented Oct 20, 2023

I've looked through the historical issues, but none of them worked in my case.

The code is roughly like this

                             <tbody>    
				<TransitionGroup component={null} >
					{
						anArrayInReduxStore.map((e, _) => {
							<CSSTransition key={e.id} classNames="fade"
								timeout={300}
								appear={true}
								exit={false}
							>
								<CustomComponent  data={e}/> //a very complex row in a table
							</CSSTransition>
						})

					}
				</TransitionGroup>
                             </tbody>

If i use code below, the warning will disapear, but the animation is gone, and the more serious thing is, when i remove element in {anArrayInReduxStore}, the Row Element doesn't remove

The code is roughly like this

    const TransitionNode = ({ e }) => {
		const nodeRef = React.useRef(null)
		return (
			<CSSTransition key={e.id} classNames="fade"
				timeout={300}
				appear={true}
				nodeRef={nodeRef}
			> 
			      <CustomComponent  data={e}/> //a very complex row in a table
			</CSSTransition>
		);
	}
                          <tbody>    
				<TransitionGroup component={null} >
					{
						anArrayInReduxStore.map((e, _) => {
							<TransitionNode key={e.id} data={e} />
						})
					}
				</TransitionGroup>
                         </tbody>
@oreqizer
Copy link

I am afraid that this library is unmaintained, mate 😕 this exact thing had me looking for an alternative months ago

@RotemCarmon
Copy link

I am afraid that this library is unmaintained, mate 😕 this exact thing had me looking for an alternative months ago

@oreqizer what alternative did you find?

@oreqizer
Copy link

oreqizer commented Nov 2, 2023

@RotemCarmon started using raw @keyframes and CSS animations together with react-aria state

a more direct alternative is the react-transition-state hook

@drikusroor
Copy link

@RotemCarmon started using raw @keyframes and CSS animations together with react-aria state

a more direct alternative is the react-transition-state hook

Hi @oreqizer, do you have any examples I could look at per chance?

drikusroor added a commit to Amsterdam-Music-Lab/MUSCLE that referenced this issue Dec 13, 2023
drikusroor added a commit to Amsterdam-Music-Lab/MUSCLE that referenced this issue Dec 16, 2023
drikusroor added a commit to Amsterdam-Music-Lab/MUSCLE that referenced this issue Dec 21, 2023
drikusroor added a commit to Amsterdam-Music-Lab/MUSCLE that referenced this issue Dec 21, 2023
* chore(deps): Migrate to React 18

* refactor: Use React 18's new rendering API

* fix: Fix absolute imports

* chore(deps): Update testing library deps

* test: Refactor Circle.test.js to improve testing process and add new functionality.

- Update Circle.test.js to use the jest.requireActual method to import Timer.
- Create a timerSpy variable to spy on the Timer.default method.
- Mock the requestAnimationFrame method to simulate the async nature of the call.
- Add beforeEach and afterEach hooks to clear all mocks and setup the necessary spy.
- Modify the "calls onTick and onFinish callbacks when running is true" test case to pass the required props to Circle component and improve readability.
- Add a new test case "does not start timer when running is false" to verify the behavior of Circle component when running is false.
- Improve the calculation of style for circle animation in the "calculates style for circle animation correctly" test case.
- Clean up the code by removing unnecessary commented code and imports.

This commit enhances the testability and functionality of the Circle component.

* refactor: Remove unnecessary testing library dependencies as per React 18

This commit removes unnecessary testing library dependencies from the frontend package.json and useResultHandler.test.js files. By removing the @testing-library/react-hooks dependency, the codebase is simplified and optimized.

* config: Use React 18 in strict mode to make it easier to find issues during development

* chore(deps): Update react-transition-group in the hope to avoid the deprecated findDOMNode warning

See also: reactjs/react-transition-group#893
@Arkellys
Copy link

Arkellys commented Dec 21, 2023

This look like a duplicate of this issue. You have to pass a ref to your <CustomComponent> as well for the animation to work.

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

No branches or pull requests

5 participants