React-Spring: Invalid Hooks Call

Question

I am trying to learn React-Spring. One of the codes provided in its documentation throws an error when I run it. Any idea what possibly is wrong? How to solve it?

The code I'm trying to run is-

const TextContent = (props) => {

    const [items] = useState([
        { id: '0', title: 'Text1' },
        { id: '1', title: 'Text2' },
        { id: '2', title: 'Text1' }
    ])

    const [index, setIndex] = useState(0);

    const transitions = useTransition(items[index], index => index.id,
        {
            from: { opacity: 0 },
            enter: { opacity: 1 },
            leave: { opacity: 0 },
            config: { tension: 220, friction: 120 }
        }
    )

    useEffect(() => {
        const interval = setInterval(() => {
            setIndex((state) => (state + 1) % items.length);
        }, 4000)
        return () => clearInterval(interval);
    }, []);

    {
        transitions.map(({ item, props, key }) => (
            <animated.div
                key={key}
                style={{ ...props, position: 'absolute' }}
            >
                <p>
                    {item.title}
                </p>
            </animated.div>
        ))
    }
}

export default TextContent;

@AlDuncanson yes both of them are 16.13.1. I've added the screenshot as well — Pratyush, Apr 20 '20 at 05:36
@Pratyush please share sandbox link your code is insufficient to draw conclusion — vinayak shahdeo, Apr 20 '20 at 05:36
@Pratyush I tried your code https://codesandbox.io/s/red-leaf-d79hj it working , only change i did was you haven't return from render function ,using all latest react and react-spring — rupesh_padhye, Apr 20 '20 at 06:54

Al Duncanson · Answer 1 · 2020-04-20T13:35:37.357

Add a return statement to your functional component

const TextContent = (props) => {

    const [items] = useState([
        { id: '0', title: 'Text1' },
        { id: '1', title: 'Text2' },
        { id: '2', title: 'Text1' }
    ])

    const [index, setIndex] = useState(0);

    const transitions = useTransition(items[index], index => index.id,
        {
            from: { opacity: 0 },
            enter: { opacity: 1 },
            leave: { opacity: 0 },
            config: { tension: 220, friction: 120 }
        }
    )

    useEffect(() => {
        const interval = setInterval(() => {
            setIndex((state) => (state + 1) % items.length);
        }, 4000)
        return () => clearInterval(interval);
    }, []);

    return (
        <div>
            {
              transitions.map(({ item, props, key }) => (
                <animated.div
                    key={key}
                    style={{ ...props, position: 'absolute' }}
                >
                    <p>{item.title}</p>
                </animated.div>
              ))
            }
        </div>
    )
}

export default TextContent;

Here is a codesandbox where I got it working

Doesn't run. I'm starting to believe the problem is with the configuration or something. I tried npm ls to display if I have multiple react-dom or react files. Turns out no. — Pratyush, Apr 20 '20 at 13:24
I updated my answer with a codesandbox where I got it working by adding a return statement — Al Duncanson, Apr 20 '20 at 13:35

score 0 · Answer 2 · answered Jun 18 '21 at 16:08

In addition to Al Duncanson answer: My problem was in exporting React Fragment instead of actual tag:

return (
  <>
    { /* springs.map() */ }
  </>
)

Hook started working after I changed it to

return (
  <div>
    { /* springs.map() */ }
  </div>
)

score 0 · Answer 3 · answered Jul 09 '22 at 15:04

In my NextJs app, I got the same issue. In my case, I think it was a cache-related issue. Run the project after removing the ".next" folder fixed the issue. I hope removing the build folder in React will do the same.

And there are two similar functions ("useSpring" and "useSprings"). Make sure to pick the right one for your use case.

React-Spring: Invalid Hooks Call

3 Answers3