I have this saga being called when opening a page with two console.log in to debug. This gives me two logs supposed to be similar. The values in data[0] is used in a AgGrid table. Two fields are editable in the table, these are null on the network call. However if i edit the fields in the browser, before expanding the console.log the value now shows as whatever i entered into the field. This will happen on either of the logs, so it can log the field as null first and then a value after.
function* saga({ Id }) {
try {
const response = yield call(get, GET_DATA(Id));
console.log(response.data[0]);
console.log(response.data[0]);
yield put(fetchDataSuccess(response.data));
} catch (error) {
yield put(displayErrorMessage(NOB.ERROR));
}
}
Are console.log supposed to be able to change after being printed if what is references change? That would somewhat reduce how efficient it is for debugging.
console.log() is effectively async, and if the value you are outputting is an object that changes shortly after you call console.log(), it is likely that what actually gets output will be the updated version.
So, short answer to your question, yes.
If you need to output it around the time of changing, there are two relatively easy means you can use to output it at that stage.
The first would be to simply output a clone. You can create a shallow clone like this:
const objectToOutput;
console.log({ ...objectToOutput });
If you need a deep clone, you could pull in a library or just write your own method.
The second option would be to convert it to JSON first. You could even then convert that JSON back to an object and output that if you want. Handy for complex objects that contain simple data (like you'd get from an API call):
const objectToOutput;
console.log(JSON.stringify(objectToOutput, null, 2));
// or
console.log(JSON.parse(JSON.stringify(objectToOutput)));