I have a React problem where I receive *inline* props, but I need to update components with the props

Question

Here's a custom component.

interface ITransitionComponent {
    children: any;
    inProp: boolean;
}

function TransitionComponent({ children, inProp }: ITransitionComponent) {
    const nodeRef = useRef(null);
    let [status, setStatus] = useState<TransitionStatus>();

    useEffect(() => {
        const ele = nodeRef?.current;

        if (ele) {
            status === "entering" &&
                animejs({
                    targets: ele,
                    translateY: {
                        value: ["200%", "0%"],
                        duration: 550,
                        easing: "easeOutElastic(1, 1)",
                    },
                    opacity: {
                        value: [0, 1],
                        duration: 50,
                        easing: "easeInOutCubic",
                    },
                });

            status === "exiting" &&
                animejs({
                    targets: ele,
                    translateY: {
                        value: ["0%", "200%"],
                        duration: 20,
                        // easing: "easeOutElastic(1, .6)",
                    },
                    opacity: {
                        value: [1, 0],
                        duration: 50,
                        easing: "easeInOutCubic",
                    },
                });
        }
    }, [status, nodeRef]);

    function setStatusHelper(presence: any) {
        setStatus(presence);
    }

    return (
        <Transition
            nodeRef={nodeRef}
            in={inProp}
            timeout={500}
            appear={true}
            exit={true}
            mountOnEnter
            unmountOnExit
        >
            {(state) => {
                setStatusHelper(state);
                return children(nodeRef);
            }}
        </Transition>
    );
}

export default TransitionComponent;

This was made in order to make a react-transition less verbose. But here's the problem.

I get a state prop from Transition which, as I understand, is called inline props (?) and I need to update my own state using the state prop that I receive inline.

        <Transition
            nodeRef={nodeRef}
            in={inProp}
            timeout={500}
            appear={true}
            exit={true}
            mountOnEnter
            unmountOnExit
        >
            {(state) => {
                setStatusHelper(state);
                return children(nodeRef);
            }}
        </Transition>

So when I use setStatusHelper inside the return statement - React as expected - complains about side-effects and that it shouldn't update a different component while another component is getting rendered.

What can I do here? How exactly can I extract the state prop without violating React rules?

Answer 1

Apparently Transition component of react-transition-group has props like onEntering, onEntered, onExiting, onExited which are methods where you can predictably extract the state.

Here's an snippet -

.
.
.
return (
        <Transition
            nodeRef={nodeRef}
            in={inProp}
            timeout={1500}
            appear={true}
            exit={true}
            mountOnEnter
            unmountOnExit
            onEntering={() => setStatus("entering")}
            onEntered={() => setStatus("entered")}
            onExiting={() => setStatus("exiting")}
            onExited={() => setStatus("exited")}
        >
            {(state) => {
                return children;
            }}
        </Transition>
    );