Functional component doesn't work as expected

[Bdragon93]

• At first, I'd like to say I am not entirely sure it's a bug, maybe a problem in my functional component implementation, if so please help me correct it.

Code example https://codesandbox.io/s/react-animate-height-animate-height-when-content-changes-forked-5ntso0?file=/src/index.js

• Works fine with the class component but with there's no animation with the functional component.
• Looks like onHeightAnimationEnd couldn't be triggered.

Expected behavior

• It should have the animation after adding the 1st item.

Possible Solution

• Replace functional component AutoTest defined in line 46, used in lines 93 and 99 by AutoHeight defined in line 5.

Steps to Reproduce (for bugs)

1. Click "add" button.

Your Environment

• Version used: I tried with 3 versions 2.1.0 / 2.1.1 / 3.1.1
• OS: MacOS 13.2.1 (22D68)
• Browser: Brave/Chrome
• Version: 112.0.5615.121

Additional context

• I'm trying to implement the animation for changing height when content changes with flexible height according to the data.
• Especially including images in content, I'll create another relevant issue later since onHeightAnimationEnd is triggered before onLoad.

[Stanko]

Hey @Bdragon93, Again, it is not problem with the library. You've ordered your hooks wrong. On the first render setHeight("auto") was called after setFixedHeight() resulting in height always being being auto. That means animation didn't trigger as height didn't change.

You need to reorder your hooks like this:

  useEffect(() => {
    console.log("set height to auto");
    setHeight("auto");
  }, [items]);

  useEffect(() => {
    console.log("mount");
    setFixedHeight();
  }, []);

Here is corrected sandbox: https://codesandbox.io/s/react-animate-height-animate-height-when-content-changes-forked-gunii1?file=%2Fsrc%2Findex.js

Please check the readme and your code more thoroughly before opening issues. You opened two and commented on the third issue and none of those were actual issues.

Hope this helps!

Cheers!