Agfdhyk

I have a component that renders a child <ul/> conditionally based on if data is fetched from the backend.

class groupInfo extends Component {

    constructor(props) {

        super(props);

        this.setSubGroupRef = this.setSubGroupRef.bind(this);

        this.checkSubgroupOverflow = this.checkSubgroupOverflow.bind(this);

        this.state = {

            data: null,

            overflowingSubgroups: false,

        }

    }

    componentDidMount() {

        //fetch data from backend

        this.setState({data})

    }

    setSubGroupRef(node){

        this.subGroupRef = node;

        node.addEventListener("resize", this.checkSubgroupOverflow);

    }

    componentWillUnmount() {

        if (this.subGroupRef) {

            this.subGroupRef.removeEventListener("resize", this.checkSubgroupOverflow);

        }

    }

    checkSubgroupOverflow() {

        const element = this.subGroupContainer;

        if (element) {

            // Check against baseline rendered height of our subgroup container, plus a few safe pixels.

            // Magic number here because we know what the height *should* be when its collapsed by CSS.

            this.setState({

                overflowingSubgroups: (element.scrollHeight > 36),

            });

        }

    }

    render() {

        const {overflowingSubgroups, data} = this.state

        return (

            <div>

                <div>

                    some information

                </div>

                {

                    data.type === "group" ?

                    <div ref={this.setSubGroupRef}>

                        <ul>

                            {

                                data.subGroups.map((subData) => {

                                    return (

                                        <li>

                                            // display sub-data info

                                        </li>

                                    )

                                })

                            }

                        </ul>

                        {

                            overflowingSubgroups ?

                                <span

                                    className="iconMore"

                                    onClick={this.toggleSubgroupExpansion}

                                >

                                    <img

                                        src={`${iconPath}icon-arrow.svg`}

                                        alt="more"

                                    />

                                </span> :

                            null

                        }

                    </div>

                }

            </div>

        )

    }

}

What i'm trying to achieve here is if the <ul/> is over flowing id like to add a toggle switch based on if my containing div is overflowing or not.
The issue is that as i'm navigating between these subGroups for the first time it also re-renders groupInfo causing a re-fetch of the data that is then stored in the redux store for later use but this also causes a new node instance to be spawned and I'm unable to kill my old eventListener. Now componentWillUnmount is not called since the component is just being re-rendered with new data.

Im trying to avoid creating a child React component for the <ul/> based on the data.type since this will involve a major refactor.