I've coded a react component which should display search result and giving the user the option to scroll down and retrieve 25 more objects to be displayed when the scrollbar hits the bottom. What I've noticed when I compile and test the component is that the filter buttons to mark is really slow, it takes a couple seconds after i click on it till it gets market, and the same applies for bookmark buttons. The component feel really sluggish when it loads in. However, for each time more items is loaded in, it also generates more publishedStates for the publishedButton.

How can I improve and optimize the performance of my component?

import * as React from "react";
import * as _ from "lodash";
declare const $: any

interface Props {
    userId: number;
}

interface State {
    objects: Object | null
    isVisible: Boolean
    searchString: string
    bookmarkStates: Array<boolean>
    publishedStates: Array<boolean>
    categories: Array<String>
    languages: Array<String>
    published: Array<String>
    hasMoreObjects: Boolean,
    storiesLoaded: number
}

const getStateName = function (isFiltered, state) {
    if (JSON.stringify(isFiltered)==JSON.stringify(state.commodityStates))
        return 'commodityStates';
    else if (JSON.stringify(isFiltered)==JSON.stringify(state.languageStates))
        return 'languageStates';
    else
        return 'publishedStates';
}

const handlePublishedTime = function (publishedTime) {
    let publishedTimeCopy = publishedTime.split(' ')
    let monthNames = [ "January", "February", "March", "April", "May", "June", 
                        "July", "August", "September", "October", "November", "December" ];
    let todayDate = new Date();
    let dd = todayDate.getDate();
    let mm = todayDate.getMonth();
    let yyyy = todayDate.getFullYear();
    // Used for comparison of dates.
    let todayDateFormat = dd + ', ' +  monthNames[mm] + ' ' + yyyy;     
    let publishedTimeFormat =   publishedTimeCopy[2].split(',') + ' ' + publishedTimeCopy[3] + ' ' + publishedTimeCopy[4]; 

    if (todayDateFormat == publishedTimeFormat) {
        return publishedTimeCopy[0];
    }

    return publishedTimeCopy[2].replace(',',' ') + ' ' + Resources[publishedTimeCopy[3]].substring(0,3)
}

export default class SearchResult extends React.PureComponent<Props, State> {  
    constructor(props) {
        super(props);

        this.state = {
            Object: null,
            isVisible: true,
            searchString: "",
            bookmarkStates: [],
            commodityStates: [],
            languageStates: [],
            publishedStates: [],
            categories: [],
            languages: [],
            published: ['1D', '2D', '1W', '1Y', '5Y'],
            hasMoreObjects: true,
            objectsLoaded: 25
        }

        $.get('/webapi/test, function (data) {
            this.setState({
                Object: data
            });
        }.bind(this));
    }

    handleScroll = (e) => {
        const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
        if (bottom) {  
            this.setState({
                storiesLoaded: this.state.storiesLoaded + 25
            });
        }
    }

    handleSearchTextInput (event) {
        this.setState({
            searchString: event
        });
    }

    handleSearchButton () {
        this.setState({
            isVisible: true
        });
    }

    addNewBookmark = function (userId, newsId, isBookmarked, bookmarkIndex) {
        $.post('/webapi/newstestAddNewBookmark?userId=' + (userId), 
        { 
            UserID: userId,
        })
        .done(function () {
            this.changeBookmarkState(isBookmarked, bookmarkIndex);
        }.bind(this))   
    }
    
    removeBookmark = function (userId, newsId, isBookmarked, bookmarkIndex) {
        $.post('/webapi/test/RemoveBookmark?userId=' + (userId), {})
        .done(function () {
            this.changeBookmarkState(isBookmarked, bookmarkIndex);
        }.bind(this))
    }

    changeBookmarkState(isBookmarked, index) {
        let bookmarkStatesCopy = this.state.bookmarkStates.slice(); // Create a copy to avoid mutation.
        bookmarkStatesCopy[index] = isBookmarked == true ? false : true;
        
        this.setState({
            bookmarkStates: bookmarkStatesCopy
        });
    }

    changeFilterState(filterByState, index) {
        const stateName = getStateName(filterByState, this.state);
        let filterByStateCopy = filterByState.slice(); // Create a copy to avoid mutation.

        if (index == 0) {
            filterByStateCopy[index] = filterByState[index] === false;
            if (stateName != 'publishedStates')
                filterByStateCopy.map(({}, index1) => {
                    filterByStateCopy[index1+1] = false;
                });
        }
        else {
            filterByStateCopy[index] = filterByState[index] === false;
            stateName != 'publishedStates' ? filterByStateCopy[0] = false : null
        };

        this.setState({
            [stateName]: filterByStateCopy
        } as any);
    }

    renderBookmarkButton(userId, newsId, isBookmarked, bookmarkIndex) {  
        return (
            <a onClick={()=>{isBookmarked == false ? this.addNewBookmark(userId, newsId, isBookmarked, bookmarkIndex) : this.removeBookmark(userId, newsId, isBookmarked, bookmarkIndex);}}>
                <img className={isBookmarked == false ? "bookmark-button" : "bookmark-button bookmark-button-fill-color"} src="/images/logo/Bookmark.svg" />
            </a>
        );
    }

    renderCategories(Object , isFiltered) {   
        let categories = this.state.categories;
        
        Object.map((object) => {
            if (Object == null)
                return null;

            object.Categories.map((categoryObj, index) => {
                if (categories[index] == null)
                    categories.push(categoryObj)
                    if(index === 0)
                        categories.splice(0, 0, 'All');         
            });
        });

        // Used to create a new array which contains all elements that pass the test.
        categories = categories.filter((value, index, array) => 
             !array.filter((v, i) => JSON.stringify(value) == JSON.stringify(v) && i < index).length);

        const mappedCategories = categories.map((category, index) => {
            if (isFiltered[index] == null) {
                isFiltered[index] = false; 
                if (isFiltered[0] == false) {
                    isFiltered[0] = true;    
                }
            };
                       
            return (
                <div key={index}>
                    <a className="checkbox-display" onClick={()=>{ this.changeFilterState(isFiltered, index);}}>
                    {isFiltered[index] ? 
                        <div className={ isFiltered[index] ? "checkbox-rectangle checkbox-rectangle-fill-color horizontal-row-filterby" : "checkbox-rectangle horizontal-row-filterby"}>
                            <img className="checkbox-image-size" src="/images/logo/checkmark.svg"/>
                        </div> : 
                        <div className="checkbox-rectangle horizontal-row-filterby"/>
                    }
                    </a>
                        <span className="category1">{index == 0 ? 'All' : category['Name']}</span>              
                </div>        
            );
        });

        return (
            <div>
                <div className="filter-by-commodity">{Resources.Commodity}</div>
                {mappedCategories}
           </div>
        );       
    }

    renderLanguage(Object , languageFilter) {   
        let languages = this.state.languages;

        Object.map((object ) => {
            if (Object == null)
                return null;

            object.Languages.map((languageObj, index) => {         
                if (languages[index] == null){
                    languages.push(languageObj)
                    if(index === 0){
                        languages.splice(0, 0, 'All');
                    };
                };
            });
        });

        // Used to create a new array which contains all elements that pass the test.
        languages = languages.filter((value, index, array) => 
             !array.filter((v, i) => JSON.stringify(value) == JSON.stringify(v) && i < index).length);

        const mappedLanguages = languages.map((language, index) => {
            if (languageFilter[index] == null) {
                languageFilter[index] = false; 
                if (languageFilter[0] == false) {
                    languageFilter[0] = true;
                }
            };
                
            return (
                <div key={index}>
                    <a onClick={()=>{ this.changeFilterState(languageFilter, index);}}>
                    {languageFilter[index] ? 
                        (<div className={languageFilter[index] ? "checkbox-rectangle checkbox-rectangle-fill-color horizontal-row-filterby" : "checkbox-rectangle horizontal-row-filterby"}>
                            <img className="checkbox-image-size" src="/images/logo/checkmark.svg"/>
                        </div>) : <div className="checkbox-rectangle horizontal-row-filterby"/>
                    }
                    </a>
                        <span className="category1">{index == 0 ? 'All' : language['LanguageName']}</span>              
                </div>        
            );
        });

        return (
            <div>
                <div className="horizonal-line-short" />
                <div className="filter-by-commodity">{Resources.Languages}</div>
                {mappedLanguages}
            </div>
        );
    }

    renderPublished(publishedFilter) {
        let published = this.state.published;

        const mappedPublished =
            published.map((pushlish , index) => {
                if (publishedFilter[index] == null) 
                        publishedFilter[index] = (false); 
                
                return (
                    <div key={index}>
                        <a onClick={()=>{ this.changeFilterState(publishedFilter, index);}}>
                                <div className={publishedFilter[index] ? "checkbox-rectangle-large vertical-row-filterby checkbox-rectangle-fill-color" : "checkbox-rectangle-large vertical-row-filterby"}>
                                    <span>{pushlish}</span>    
                                </div>
                        </a>          
                    </div>        
                );
            });

        return (
            <div>
                <div className="horizonal-line-short" />
                <div className="filter-by-commodity">{Resources.Published}</div>     
                <div className='checkbox-display'> {mappedPublished}</div>     
            </div>
        );
    }

    renderStories(Object ) {
        let isBookmarked = this.state.bookmarkStates;

        if(Object == null)
            return null;

        const mappedStories = 
            Object.slice(0, this.state.objectsLoaded).map((object , index) =>  {
                if (isBookmarked[index] == null) 
                    isBookmarked[index] = object.IsBookmarkedMain;
                
                return (
                    <div key={index} className={index == 0 ? "object-rectangle-no-bg" : index % 2 == 0 ? 'object-rectangle-no-bg' : 'object-rectangle'}>
                        <span className="published-time">{handlePublishedTime(object.PublishedTime)}  </span>
                        <div>
                            <a className="object-header" href={"/test/object.aspx?newsId=" + object.ID}>{object.Header}</a>
                            {this.renderBookmarkButton(this.props.userId, object.Id, isBookmarked[index], index)}
                        </div>
                    </div>
                );   
            });

        return (
            <div>
                {mappedStories}
            </div>
        );
    }

    renderResults(Object, isVisible, commodityStates, languageStates, publishedStates) {
        if (isVisible){
            return (
                <div className="search-result-master-container">
                    <span className="section-header">{Resources.Filter_By}</span>
                    <span className="section-header">{Object.length} {Resources.Results}:</span>
                    <div id="filterBySideBar">
                        <div className="horizontal-line-filter">
                            <div>{this.renderCategories(Object , commodityStates)}</div>
                            <div>{this.renderLanguage(Object , languageStates)}</div>
                            <div>{this.renderPublished(publishedStates)}</div>
                        </div>
                    </div>
                    <div className="horizontal-line-stories-top"/>
                    <div className="scrollbar"  onScroll={this.handleScroll.bind(this)}>
                        <div className="force-overflow">
                                {this.renderStories(Object)}
                        </div>
                    </div>
                    <div className="horizontal-line-stories-bottom" />
                </div>    
            );       
        }                 
    }

    render() {
        let Object = this.state.Object;
        let isVisbible = this.state.isVisible;
        let commodityStates = this.state.commodityStates;
        let languageStates = this.state.languageStates;
        let publishedStates = this.state.publishedStates;

        if (Object == null)
            return null;

        let renderShowResults = this.renderResults(Object , isVisbible, commodityStates, languageStates, publishedStates);

        return renderShowResults
    };
}