Button property not updated on state change - reactjs

Question

I have a Button that stays disabled according to mapped state variables. It works when the page is loaded, but after processing, the state changes but the Button stays enabled.
The state should transition like this
loading: false -> button disabled: true
when button is clicked:
loading: true -> button disabled: true
when processing finishes:
loading: false -> button disabled: false
The loading state is changed, however the disabled attribute just changes for the first time.
Page.jsx (just some snippets for simplicity)
const [disabled, setDisabled] = useState(true);
const { loading } = useSelector(state => state.spreadsheet);
const importData = () => {
importOperations.createRows(rows, dispatch);
};
return (
<>
<Button
variant="contained"
color="primary"
onClick={importData}
className={classes.spacing}
disabled={disabled || loading}
>
Import
</Button>
</>
);
importOperations.js
export const createRows = async (rows, dispatch) => {
dispatch(importActions.setLoading(true));
// ......
dispatch(importActions.setLoading(false)); // this step is correctly executed
};
importReducer.js
export const INITIAL_STATE = {
messagesLog: [],
loading: false
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case spreadsheetActions.SET_LOADING:
return { ...state, loading: action.payload };
default:
return state;
}
};
Do you have any suggestion on why the button doesn't change back to disabled?

Answer 1

I would have commented and asked you to clarify the following first, but it won't let me comment, so I have to ask you here:
I think there may be a problem in the logic that you mentioned. But I could be wrong, so I am commenting here first before trying to answer your question.
You said you want the following but that won't work because, if loading is false, button disabled is true. If the button is disabled, you can't click on it.
You said when the button is clicked, you want loading to be true. That is fine, but you want button disabled to be false?? Would you want people to click on the button when it is loading?
loading: false -> button disabled: true
when button is clicked:
loading: true -> button disabled: false
when processing finishes:
loading: false -> button disabled: true
Regardless, I have put together some helpful code below to match what you asked. I'll be happy to assist further once you verify if the logic you mentioned is correct.
Can you try the following. it is the best I could put together to mimic your code somewhat
import React, { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [disabledState, setDisabledState] = useState(false);
const [loading, setLoading] = useState(false);
// sets loading to true when clicked, and
const importData = () => {
setLoading((loading) => !loading);
setTimeout(() => {
setLoading((loading) => !loading);
}, 1000);
};
// set loading to false initially when component mounts
useEffect(()=> {
setLoading(true)
},[])
// I would set disabled to true when loading else false
// but I have matched it to watch you mentioned in your post below
// you may changed your it accordingly to your needs here
useEffect(() => {
loading ? setDisabledState(false) : setDisabledState(true);
}, [loading]);
return (
<>
<span>{`${loading}`}</span>
<button
variant="contained"
color="primary"
onClick={() => importData()}
disabled={disabledState}
>
Import
</button>
</>
);
}
Here is a link to the CodeSandbox for the above: https://codesandbox.io/s/twilight-hill-urv8o?file=/src/App.js:0-1055