проблема с рендерингом контента с помощью хука useEffect

Я показываю список купонов на основе категории, выбранной с помощью useEffect и saga.

const initialState = {
    is_loading: true,
    coupon_data: [],
    error_msg: '',
} 

Это мое исходное состояние. is_loading установлено значение true по умолчанию, так что при каждом посещении компонента он сначала показывает загрузчик, после этого getCoupon() получает отправку от useEffect, который обращается к api и получает ответ асинхронно с использованием redux-saga, затем is_loading устанавливается в значение false и обновляется на основе ответа coupon_data или error_msg .

это компонент:

    const Couponlist = props => {
    const [coupon, updateCoupon] = useState(null);

    useEffect(() => {
        if (props.coupon.is_loading) {
            updateCoupon(<Loader />);
            props.getCoupon(props.match.params.category)
        } else if (!props.coupon.is_loading && props.coupon.coupon_data.length) {
            const coupon_data = props.coupon.coupon_data.map(coupon => {
                return (<div key={coupon.id} className="card" style={{ width: "18rem" }}>
                    <img className="card-img-top" src={coupon.banner}
                        alt={"Card image cap " + coupon.id} />
                    <div className="card-body">
                        <h5 className="card-title">Outlet : {coupon.outlet}</h5>
                        <p className="card-text">Category : {coupon.category}</p>
                        <p className="card-text">Merchant : {coupon.merchant}</p>
                        <p className="card-text">Price : {coupon.coupon_price}</p>
                        <p className="card-text">Valid From : {coupon.valid_from}</p>
                        <p className="card-text">Valid To : {coupon.valid_to}</p>
                        <p className="card-text">Trending : {coupon.trending}</p>
                    </div>
                </div>)
            })
            updateCoupon(coupon_data);
        } else if (!props.coupon.is_loading && props.coupon.error_msg !== '') {
            updateCoupon(props.coupon.error_msg);
        }

    }, [props.match.params.category, props.coupon])

    return coupon;
}
const mapStateToProps = state => {
    return { coupon: state.coupon };
}

const mapDispatchToProps = dispatch => {
    return {
        getCoupon: category => dispatch(getCouponeInit(category))
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Couponlist);

Когда компонент посещается впервые, is_loading равен true, поэтому if (props.coupon.is_loading) становится истинным, и загрузчик визуализации компонента и запрашивает api для данных.

после получения данных из api is_loading устанавливается в false и компонент отображает данные купона.

Теперь проблема заключается в том, что когда пользователь нажимает на другую категорию, Couponlist компонент снова посещается, но на этот раз is_loading имеет значение false, а также в магазине есть старые данные. Таким образом, в этом случае при запросе нового компонента данных просто отображаются старые доступные данные.

Как я могу справиться с этим состоянием?