Glossary

The glossary explains some common React jargon in simpler terms. See also Glossary + Explain Like I'm Five in the React Working Group.

ancestor component

See component, ancestor.

Babel

drilling, prop

Prop drilling refers to passing down a prop from an ancestor to a descendant component by repeatedly passing it from parent to child component. Also called threading.

comparison, deep

comparison, shallow

We make a comparison to tell if two objects are the same.

In JavaScript simple values (numbers, strings, etc.) that match are equal:

'hello' === 'hello';
1 === 1;
null === null;
undefined === undefined;

However, Arrays and Objects are only equal if they have the same reference (that is, they point to the same thing), even though they look to have the same values inside.

{ a: 1, b: 2} !== { a:1, b: 2 };
[1, 2, 3] !== [1, 2, 3];

let objA = objB = { a: 1, b: 2};
objA === objB;

let arrA = arrB = [1, 2, 3];
arrA === arrB;

A more useful comparison might look at whether the properties of two objects, or the items in two arrays, are the same:

equal({ a: 1, b: 2 }, { a: 1, b: 2 }); // => true

Now the question is, how deep inside objects do we look?

A shallow comparison looks only at the top-level properties to see if they match, hence the name shallow:

let objA = { a: 1, b: 2 };
let objB = { a: 1, b: 2 };

shallowEqual(objA, objB); // => true

let objC = {
	a: 1,
	b: {
		ba: 1,
		bb: 2
	}
};

let objD = {
	a: 1,
	b: {
		ba: 1,
		bb: 2
	}
};

shallowEqual(objC, objD); // => false

A comparison that looks at nested properties inside objects is called a deep comparison, but it can be slower to check the properties at all levels.

A shallow comparison is thus useful enough, and fast enough, to be used in React components so that we can tell whether anything was added, removed, or updated in the component's props or state, and decide whether that warrants a re-render.

React.PureComponent is, in fact, just a React.Component that implements a shallow comparison between the current props and the new props, and the current state and new state in the shouldComponentUpdate method.

It makes it important to use immutable structures.

component

component, ancestor

We say that a component is an ancestor of another component if it's higher up the component tree. A direct ancestor is usually called a parent component.

The reverse of an ancestor is called a descendant. A direct descendant is called a child.

<A>
	<B>
		<C />
	</B>
</A>

In the example above, A is an ancestor of C; conversely, C is a descendant of A.

In React parents and children communicate via props. Ancestors and descendants can use the context API to communicate direcly without having to pass props down the component tree from parent to child.

component, child

In React parents and children communicate via props.

component, class

component, descendant

We say that a component is a descendant of another component if it's lower down the component tree. A direct descendant is usually called a child component.

The reverse of an descendant is called an ancestor. A direct ancestor is called a parent.

<A>
	<B>
		<C />
	</B>
</A>

In the example above, C is an descendant of A; conversely, A is an ancestor of C.

component, functional

component, higher-order

component, parent

In React parents and children communicate via props.

component, pure

component, stateful

component, stateless

component tree

Also called component hierarchy.

context

cross-cutting concern

deep comparison

See comparison, deep.

deep merge

See merge, deep.

element

ES2015

ES6

event

event, native

event, synthetic

function, callback

function, pure

function, impure

functional component

See component, functional.

higher-order component

See component, higher-order.

immutable structure

impure function

See function, impure.

JSX

lifecycle method

See method, lifecycle.

map

memoize

merge, shallow

Merging means combining two or more objects. It usually involves a source object and a destination object.

A shallow merge is takes the properties from the source object and copies them over to the destination object, adding to it any new properties and overwriting existing properties with new values.

const source = {
	name: 'New Name',
	address: {
		city: 'Bucharest'
	},
	birthdate: '01/01/1911'
};

const destination = {
	name: 'Old Name',
	address: {
		city: 'Cluj-Napoca',
		street: 'Museum Square'
	},
	occupation: 'freelancer'
};

shallowMerge(destination, source);

/* => 
{
  name: 'New Name',
  address: {
    city: 'Bucharest'
  },
  occupation: 'freelancer'
}
 */

In the example above, the destination object:

gets a new value for the existing string property name;
gets an entirely new object for the existing object property address;
gets a new property birthdate;
retains its value for the property occupation.

It's called a shallow merge because it doesn't merge nested properties; instead it overwrites them altogheter (in the example, the address property gets overwritten). A merge that also applies to nested properties is called a deep merge.

A React component's setState(newState) method shallowly merges newState into the component's existing state, so you only need to send the properties you want to change to it.

merge, deep

Merging means combining two or more objects. It usually involves a source object and a destination object.

A deep merge is takes the properties from the source object and copies them over to the destination object, adding to it any new properties and merging the old values of existing properties with the new values.

const source = {
	name: 'New Name',
	address: {
		city: 'Bucharest'
	},
	birthdate: '01/01/1911'
};

const destination = {
	name: 'Old Name',
	address: {
		city: 'Cluj-Napoca',
		street: 'Museum Square'
	},
	occupation: 'freelancer'
};

deepMerge(destination, source);

/* => 
{
  name: 'New Name',
  address: {
    city: 'Bucharest',
    street: "Museum Square"
  },
  occupation: 'freelancer'
}
 */

In the example above, the destination object:

gets a new value for the existing string property name;
gets a value for the existing object property address that merges existing value and the new value;
gets a new property birthdate;
retains its value for the property occupation.

It's called a deep merge because also merges nested properties instead of overwriting them altogether as in the case of a shallow merge.

A React component's setState(newState) method does not deeply merge newState into the component's existing state (instead, it does so shallowly). Use a variant of the setState function that allows you to build the new state out based on the existing one to update a nested property:

this.setState(previous_state => {
	return {
		address: {
			...previous_state.address,
			city: 'Bucharest'
		}
	};
});

The example above updates the nested address.city property of the state.

method, lifecycle

mount

Mounting means adding a component to the DOM. The opposite operation of removing a component from the DOM is called unmounting.

native event

See event, native.

parent component

See component, parent.

pure component

See component, pure.

pure function

See function, pure.

prop

props

property, static

React

Redux

ref

shallow comparison

See comparison, shallow.

shallow merge

See merge, shallow.

side-effect

state

state (React)

state (Redux)

stateful component

See component, stateful.

stateless component

See component, stateless.

static property

See property, static.

synthetic event

See event, synthetic.

threading

See drilling, prop.

unmount

Unmounting means removing a component to the DOM. The opposite operation of adding a component to the DOM is called mounting.