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 :)
