Here are 6 JavaScript concepts you should understand in order to be fully proficient in React.

1/ Falsiness

Falsiness means values that are "as if" they were false. i.e. They don't trigger "if" statements.

Falsy values includes 0, null, undefined, the empty string and NaN.

=> Falsy values are used in conditional rendering

2/ Object mutation

Let's create an object : let a = {}

Then copy to another variables : let b = a

Finally, we change a's shape : a.id = 42

What does 'a == b' evaluate to? To "true".

=> Changes to a are not detected by comparing a to b. Generally speaking it is best not to store React state in an object

React change detection checks how variables change, just changing a member doesn't trigger the change detection.

3/ Destructuring

We can extract values from an object or an array. For example, if we pick from our previous example, and write :

let { id } = a;

This amounts to: let id = a.id;

In the same way, if we have an array stored in a variable called arr,

let [ c] = arr;

amounts to let c = arr[0];

=> Destructuring allows us to extract values from an object or array

(For example, the useState hook returns and array with the current state and a function to set a new state.)

4/ The spread operator

The spread operator (...) "explodes" an array or an object in to its component values.

So if we write : let b = { ...a}, b has the same values as a (i.e. it contains the same data) but a is not equal to b.

=> If we do store state inside an object (for example with useContect), we can use the spread operator to create new objects to store in the state and to ensure changes are detected.

5/ Boolean operators

Boolean operators are && and ||

They don't quite work as you would expect, in that they don't (necessarily) return true or false. Instead, if a is falsy, a || b evaluates to b. And if a is truthy, a && b evaluates to b.

=> This means that if you have a condition, and you only want to return a <Component> if it is true, you can write condition && <Component>

Be careful with falsiness though: most falsy values don't provoke any render, but 0 will be displayed, even if it is falsy. So if in our code above condition is 0, you're getting a 0 in your UI. (you're fine with false, null, undefined and the empty string though)

6/ array function : Map & Filter

a/ Map allows you to transform an array using a function :

arr.map((item) => f(item))

=> This allows you for example a different component for each item in a list of values

b/ filter allows you to filter an array of all the values where a condition is false

arr.filter((item) => isValid(item))

Used with map this allows for powerful interface updates

In summary, you need to understand:

1/ Falsiness

2/ Object mutation

3/ Destructuring

4/ The spread operator

5/ Boolean operators

6/ The map & filter array functions

Make sure you follow for more insights from the frontlines of web development :)