Redux devtool eliminates fields' stabs from store as I declare them undefined in my initial state

[levitomer]

During development, I noticed some magic happens in my Redux DevTool after using undefined in initialState fields. I found that the store eliminates fields as I declare them undefined in my initial state. On the other, when I declare them as null, they appear back again (in the devtool state tree). So I would like to have some clarification over this subject. What is the meaning and implications of declaring undefined vs. null in the initial state?

I do feel that declaring fields as null saves me time to visit my reducers every time I want to recap how my state looks like (since I can inspect them in redux devtool). So developer/debugging experience is better.

Examples:

My initial state (null declaration)

const initialState = {
    data: null,
    pending: {
           flag: false
    },
    error: null
};

In Redux Devtool:

data(pin): null
pending(pin): {...}
error(pin): null

My initial state (undefined declaration)

const initialState = {
    data: undefined,
    pending: {
           flag: false
    },
    error: undefined
};

In Redux Devtool:

pending(pin): {...}

I expect the store to be lightweight and faster in terms of selecting parts of it. Is there any performance gain?

[esayler]

I believe this is because by default redux devtools serializes JS objects using JSON.stringify, which will omit object properties with values of undefined. According to the docs, this is the default because its the most performant.

You can change the method of serialization: see serialize in the docs' options page here for alternatives.

It's probably a best practice to avoid seting properties in state objects to undefined anyway, for more reasons than just this one, anyone feel free to correct me here if I'm wrong.

[levitomer]

@esayler Thanks for elaborating on this. It makes sense now.

But I'm not sure what is the best practice about using undefined / null in state?

Is seems that declaring undefined/null effects default values in object destructuring:

Default values exist:

var { state = "value" } = { state: undefined }
state === "value" // true

Default value lost:

var { state= "value" } = { state: null }
state === "value" // false

Confused.