Currently i implemented React Hooks with Redux. Now the only issue is that when changing the Redux state the performance is going down in my app e.g:
import { cardItemIsDragging, storeWidgetDrag } from '../../redux/actions';
then:
/** pass currentUser and currentChannel from redux to global props */
const mapStateToProps = state => ({
storeWidget: state.storewidgetinfo.storeWidgetInfo,
storeDrag: state.storewidgetdrag.storeWidgetDrag,
storeDelete: state.storewidgetdelete.storeWidgetDelete,
});
and also having:
/** @component */
export default connect(mapStateToProps, {
cardItemIsDragging,
storeWidgetDrag,
})(Layout);
Now inside of this component there is a function that will update the Redux state:
/** Calls when drag starts. */
const onDragStart = () => {
const { cardItemIsDragging } = props;
cardItemIsDragging(true);
};
Im updating this state because im also using it in another component. The code above is resulting in a performance drop of the component/app, so my question is what is the best practice to setup Redux without losing performance / unnecessary re-rendering of the component, but keep changing state while it is needed in another component.