I've got a problem where my component re-renders successfully but the state doesn't change inside the child components that receives the date interpolated inside a string
Example:
export const IntegrationPage = () => {
const currentWorkspace = useSelector(getCurrentWorkspace);
const workspaceState = useSelector(getWorkspaceState);
const [workspaceId, setWorkspaceId] = useState(currentWorkspace?.identifier);
useEffect(() => {
setWorkspaceId(currentWorkspace?.identifier);
//if I console.log workspaceId here, it updates correctly as well.
}, [currentWorkspace]);
if (!currentWorkspace || workspaceState.status === Status.requesting || !workspaceId) {
return <LoadingSpinner />;
}
return (
<div className={styles.IntegrationPage}>
<div className={styles.content}>
<div className={styles.left}>
//This updates correctly
<Card leftHeader="Tracking overview" rightHeader={`ID: ${workspaceId}`}>
<CardItem content="No visits in last 48 hours" header="No data" variant="item" />
</Card>
<CodeBox>
{`something here ${workspaceId} something else`}
</CodeBox>
...
</div>
</div>
);
};
CodeBox:
type CodeBoxProps = {
children?: ReactNode;
src?: string;
};
export const CodeBox: FunctionComponent<CodeBoxProps> = ({ children, src }) => {
const dispatch = useDispatch();
const handleCopy = () => {
const text = src?.toString() ?? children?.toString();
navigator.clipboard.writeText(text ? text : "");
dispatch(showNotification("Code was copied to clipboard", "success", "clipboard", 2250));
};
return (
<div className={styles.codeBox} onClick={handleCopy}>
<code className={styles.code}>{src ?? children}</code>
</div>
);
};
As you can see, I've tried passing the code inside a src prop instead of children but the error persists.
I "solved" it using redux and updating the action:
export const changeWorkspace = (workspaceId: number) => async (dispatch: any) => {
await dispatch({
type: WORKSPACE_CHANGE,
workspaceId,
});
return dispatch({
type: WORKSPACE_SET,
workspaceId,
});
localStorage.setItem("selected-workspace", workspaceId);
};
//reducer:
case WORKSPACE_CHANGE:
return {
...state,
status: Status.change,
currentWorkspace: state.workspaces.find((workspace) => workspace.id === action.workspaceId),
};
case WORKSPACE_SET:
return {
...state,
status: Status.success,
};
And then updating the loading spinner condition like so:
if (!currentWorkspace || workspaceState.status === Status.change || !workspaceId) {
return <LoadingSpinner />;
}
Which forces to re-render the whole component each time I change the workspace. (Status becomes change so it returns the loading spinner for a split millisecond and then renders the component again with the correct values)