DEV Community: Yohann Legrand

Understanding equality of values in JavaScript (+ React useEffect dependencies)

Yohann Legrand — Tue, 26 Oct 2021 10:10:48 +0000

Equality of values in JavaScript: for years, this has been a quite obscure topic for me. How many times have I been confused by an if statement behaving in a surprising way, I cannot count. So: what are we talking about anyway? Check out this piece of code:

const userA = {firstname: 'John', lastname: 'Doe'}
const userB = {firstname: 'John', lastname: 'Doe'}

if (userA === userB) {
    console.log('Both users are the same')
} else {
    console.log('Users A and B are different')
}

What do you think the output will be when this code runs? Think about it for a second.

💡 Reveal answer

✅ If your answer was Users A and B are different, you're right, congrats 🍾

Does this answer surprise you? Well, that is what we are going to talk about in this blog post. So let's clarify this, shall we?

1. Value types

The first step in understanding the equality of values is knowing the possible types for these values. In our JavaScript universe, we manipulate values all the time, and they can either be primitive values, or they can be of a special type.

1.1. Primitive values

Here is the exhaustive list of all the primitive values that we can encounter in our universe, with examples:

booleans => true / false
numbers => 7, 42, 2048, ...
bigints => 6549846584548n (the n at the end is what makes it a BigInt
strings => "Apple"
symbols => Symbol()
undefined => undefined
null => null

That's it. Please note that there is only one possible value for the primitive type undefined, and that is... undefined. The same goes for the type null:

console.log(typeof(undefined)) // undefined
console.log(typeof(null)) // null

I am now gonna make a statement that might shock you, brace yourself, you'll be alright:

All primitive values already exist in the JavaScript universe

This means it's impossible to create a brand new value of a primitive type. I know, weird, right? When you do this:

let likes = 0
let views = 0

You are creating two variables that point to the already existing value 0, which is a number. This can be represented as the following:

It's even more surprising when we talk about strings:

let name = "John Doe"

The string "John Doe" isn't actually created out of nowhere, it already exists, you're just pointing to it. This might sound crazy, but it's crucial to understand when it comes to equality of values. Just imagine a world where all possible values for each primitive type already exist, waiting for a variable to point to them.

Knowing this, it becomes obvious that those assertions are all truthy:

console.log('John Doe' === 'John Doe') // ✅ true
console.log(42 === 42) // ✅ true
console.log(null === null) // ✅ true
console.log(undefined === undefined) // ✅ true

1.2. Special types

Ok, so far we've understood that all primitive values already exist, and that writing 2 or hello in our code always "summons" the same number or string value.

Special types, however, behave very differently, and allow us to generate our own values. They are only two special types in JavaScript:

Objects => {firstname: 'John', lastname: 'Doe'}
Functions => function hello() { console.log('hello') }

When writing {} or () => {}, it always create a brand new different value:

let banana = {}
let apple = {}
console.log(banana === apple) // ❌ false: they are different values !

If we take a look back at our first example:

// Create a brand new object with properties firstname and lastname
// pointing to the already existing strings "John" and "Doe"
const userA = {firstname: 'John', lastname: 'Doe'}
// Again, create a brand new object with properties firstname and lastname
// pointing to the already existing strings "John" and "Doe"
const userB = {firstname: 'John', lastname: 'Doe'}

// userA and userB are totally different objects
if (userA === userB) {
    console.log('Both users are the same')
} else {
    // ...so they are "different", even though their properties are equal
    console.log('Users A and B are different')
}

userA and userB both point to a brand new object. Each object has a property firstname pointing to the one and only string value 'John', and a property lastname pointing to the one and only string value Doe. Here is a sketch of the variables userA and userB:

Properties of an object can be seen as wires pointing to a value. Nothing more, nothing less. They can either point to primitive values, as is the case here, or they can also point to special types like other objects:

2. Types of equality

In JavaScript, they are several kinds of equality:

Strict Equality: a === b (triple equals).
Loose Equality: a == b (double equals).
Same Value Equality: Object.is(a, b)

The rules of loose equality (also called "abstract equality") can be confusing, which is why many coding standards nowadays prohibit its use altogether.

Nowadays web coding standards mainly use strict equality and same value equality. They behave mostly the same way, except two rare cases:

NaN === NaN is false, although they are the same value
-0 === 0 and 0 === -0 are true, although they are different values.

Fun fact: Despite Object in the method name, Object.is is not specific to objects. It can compare any two values, whether they are objects or not!
console.log(Object.is(2, 2)) // ✅ true

3. Conclusion

🌯 Let's wrap things up: so far we've learned that primitive values in JavaScript can't be created, they already exist. Special type values, however, like objects or functions, are always generated to give us brand new values, which is why two objects or functions will never be strictly the same (===).

Objects have properties, which can be seen as wires pointing to primitive values, or to other objects. This can be confusing if two objects have properties pointing to the same values, like the ones in our very first example at the top: they may look the same, but they are indeed two different objects.

To build a reliable mental model around this, it's particularly useful to visualize wires going from our variables and pointing to values in the JavaScript universe. I have used Excalidraw to sketch the diagrams for this blog post, and I highly encourage you to try it out on real-world scenarios to sharpen your mental model.

This post was inspired by the fabulous Just JavaScript Course by Dan Abramov, illustrated by Maggie Appleton. The course is really affordable and definitely worth spending some time on.

4. Bonus: React hook dependencies

If you're using React, it is very likely that you have to manage useEffect dependencies here and then. Understanding equality of values is particularly important in this case, because as I mentioned previously on my post Master the art of React.useEffect:

React relies on value stability for useEffect dependencies

This means that if you have a dependency which value isn't stable from a render to another, your useEffect will in fact run on every render. React will see that one of the dependencies has changed, so it will run the useEffect to synchronize with it. Here is a (really contrived) example to illustrate my point:

const [count, setCount] = React.useState(10)

const alertCountOver = () => console.log('Count is too high !');

React.useEffect(() => {
    console.log('running check on count value')
    if (count > 100) {
      alertCountOver()
    }
}, [count, alertCountOver])

What we want in this situation is our useEffect to run every time count changes. Because we use the alertCountOver function in the useEffect, our dear ESLint plugin has told us we should include it in our dependencies array.

The problem is: alertCountOver isn't stable! In fact, every time this component will render, the alertCountOver variable is assigned to a brand new function, so its value will always be different from previous renders. This results in our useEffect running on every render. Whoops 🥴

This is why understanding the difference between primitive values, special types values and how they behave when performing strict equalities is crucial here.

There are two possible solutions in our case:

Extract the function alertCountOver outside of our component's body: this way the assignment will only occur once, and the value will become stable.

// ✅ This is fine 
const alertCountOver = () => console.log('Count is too high !');

function Counter() {
    const [count, setCount] = React.useState(10)

    React.useEffect(() => {
        if (count > 100) {
          alertCountOver()
        }
    }, [count, alertCountOver])

    return (
        // ... 
    )
}

Memoize the value of alertCountOver to make it stable:

function Counter() {
    const [count, setCount] = React.useState(10)

    // ✅ This is fine 
    const alertCountOver = React.useCallback(
        () => console.log('Count is too high !')
    , []);

    React.useEffect(() => {
        if (count > 100) {
          alertCountOver()
        }
    }, [count, alertCountOver])

    return (
        // ... 
    )
}

To learn more about memoization in React, check out this blog post by Kent C. Dodds

That's all for today's breakfast folks. If you liked this post, feel free to share it with your friends/colleagues and leave your thoughts in the comments!

Have a fantastic day,

With 🧡, Yohann

Manipulating arrays by use case

Yohann Legrand — Tue, 06 Jul 2021 15:55:21 +0000

Photo by Elisa Calvet B.

☕️ Read this article on my blog

Intro

There are so many ways to create and manipulate arrays in JavaScript that it can be confusing at first. And even after years of practice, it can still be hard to remember which method to use, and when. This post aims to provide something like a "cheat sheet" with the most common array methods by use case, with concise examples. I truly believe that learning from examples is one of the best ways of learning, as long as you practice independently. Feel free to bookmark this post and come back anytime you need 😉

1. Populating

6 ways to create and populate this array: [ 'fruit', 'fruit', 'fruit', 'fruit', 'fruit' ]

// 1. The obvious way 😇
const fruits = ['fruit', 'fruit', 'fruit', 'fruit', 'fruit']

// 2. The old fashion way 🥃
const fruits = new Array(5)
for (let i=0; i<test.length; i++) {
  fruits[i] = 'fruit'
}

// 3. Using Array.prototype.fill()
const fruits = new Array(5).fill('fruit')

// 4. Using Array.from()
const fruits = Array.from({length: 5}, () => 'fruit')

// 5. Using spreading
const fruits = [...new Array(5)].map(() => 'fruit')

// 6. Using concat
const fruits = ['fruit', 'fruit', 'fruit'].concat(['fruit', 'fruit'])

2. Transforming

Let's consider this array of objects:

const fruits = [
  { name: "apple", quantity: 3 },
  { name: "orange", quantity: 5 },
  { name: "pear", quantity: 1 },
  { name: "banana", quantity: 0 },
]

We can build a new array without mutating the original array in various ways, depending on the needs:

// 1. Transform with Array.prototype.map()
fruits.map(fruit => fruit.name)
// > [ 'apple', 'orange', 'pear', 'banana' ]

fruits.map((fruit, idx) => {
    // Map is particularly usefull to build strings for each element of an array
    let str = `#${idx + 1} ${fruit.name} (${fruit.quantity})`
    return str
})
// > ['#1 apple (3)', '#2 orange (5)', '#3 pear (1)', '#4 banana (3)']


// 2. Filter the array
fruits.filter(fruit => fruit.quantity === 0)
// > ['banana']

// 4. "Reduce" the array to a single value
fruits.reduce((total, fruit) => total + fruit.quantity, 0)
// > 9

// 5. Get a "slice" out of the array (without changing it)
fruits.slice(0, 2)
// > [ { name: 'apple', quantity: 3 }, { name: 'orange', quantity: 5 } ]

// The original array is still untouched
console.log(fruits)
// > [
//     { name: "apple", quantity: 3 },
//     { name: "orange", quantity: 5 },
//     { name: "pear", quantity: 1 },
//     { name: "banana", quantity: 0 },
//   ]

Or we can directly modify the original array:

// 1. Remove the last item (and return it)
fruits.pop()
// > { name: 'banana', quantity: 3 }
console.log(fruits)
// > [
//     { name: 'apple', quantity: 3 },
//     { name: 'orange', quantity: 5 },
//     { name: 'pear', quantity: 1 }
//   ]

// 2. Add one or more item(s) at the end (return the new length)
fruits.push({name: 'kiwi', quantity: 2}, {name: 'strawberry', quantity: 14})
// > 5
console.log(fruits)
// > [
//     { name: 'apple', quantity: 3 },
//     { name: 'orange', quantity: 5 },
//     { name: 'pear', quantity: 1 },
//     { name: 'kiwi', quantity: 2 },
//     { name: 'strawberry', quantity: 14 }
//   ]

// 3. Remove the first item (and return it)
fruits.shift()
// > { name: 'apple', quantity: 3 },
console.log(fruits)
// > [
//     { name: 'orange', quantity: 5 },
//     { name: 'pear', quantity: 1 },
//     { name: 'kiwi', quantity: 2 },
//     { name: 'strawberry', quantity: 14 }
//   ]

// 4. Add an item at the begining (return the new length)
fruits.unshift({ name: 'cherry', quantity: 7 })
// > 5
console.log(fruits)
// > [
//     { name: 'cherry', quantity: 7 },
//     { name: 'orange', quantity: 5 },
//     { name: 'pear', quantity: 1 },
//     { name: 'kiwi', quantity: 2 },
//     { name: 'strawberry', quantity: 14 }
//   ]

The Array.splice method can also be used to change an array by removing and adding elements. It returns the removed elements (or an empty array if no elements were removed).

// Array.prototype.splice(index[, deleteCount, element1, ..., elementN])

// 1. Remove elements 
let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(0, 2)
// > [ 'green', 'yellow' ] 
console.log(colors)
// > [ 'blue', 'purple' ]

// ... without "deleteCount", all elements starting from "index" are removed
let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(1)
// > [ 'yellow', 'blue', 'purple' ]
console.log(colors)
// > [ 'green' ]

// 2. Replace elements
let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(2, 2, 'pink', 'orange')
// > [ 'blue', 'purple' ]
console.log(colors)
// > [ 'green', 'yellow', 'pink', 'orange' ]

// 3. Insert elements
let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(2, 0, 'red', 'white')
// > []
console.log(colors)
// > [ 'green', 'yellow', 'red', 'white', 'blue', 'purple' ]

3. Making assertions

// Let's get back to our fruits 🍊🍒🍌
const fruits = [
  { name: "apple", quantity: 3 },
  { name: "orange", quantity: 5 },
  { name: "pear", quantity: 1 },
  { name: "banana", quantity: 0 },
]

// 1. Array.prototype.some() => check if a least one fruit is out of stock
fruits.some(fruit => fruit.quantity === 0)
// > true

// 2. Array.prototype.every() => are every fruits out of stock ?
fruits.every(fruit => fruit.quantity === 0)
// > false

// 3. Array.prototype.includes()
const shoppingList = ['bread', 'milk', 'cofee', 'sugar']
shoppingList.includes('bread')
// > true
shoppingList.includes('orange')
// > false

4. Ordering

// Array.sort change the original array, as well a returning 
// its new value (the sorted array)
const numbers = [4, 1, 8, 3, 5]
numbers.sort((a, b) => b - a)
// > [ 8, 5, 4, 3, 1 ]
numbers.sort((a, b) => a - b)
// > [ 1, 3, 4, 5, 8 ]

// If you don't want to mutate the original array, you can spread it before:
const numbers = [4, 1, 8, 3, 5]
const sortedNumbers = [...numbers].sort((a, b) => a - b)
// sortedNumbers = [ 1, 3, 4, 5, 8 ]
// numbers = [4, 1, 8, 3, 5]

5. Searching

const fruits = ['apple', 'orange', 'banana', 'apple', 'kiwi']

// Array.prototype.indexOf()
fruits.indexOf('apple')
// > 0
fruits.indexOf('kiwi')
// > 4
fruits.indexOf('pear')
// > -1

// Array.prototype.lastIndexOf()
fruits.lastIndexOf('apple')
// > 3

// Array.prototype.find()
const numbers = [1, 32, 12, 8, 4, 17]
numbers.find(number => number > 10)
// > [32, 12, 17

6. Arrays & Strings

// 1. Array.join 
const words = ['Hello', 'wonderful', 'world']
words.join(' ')
// > 'Hello wonderful world'

// 2. Array.split
const sentence = "Hello wonderful world"
sentence.split(' ')
// > [ 'Hello', 'wonderful', 'world' ]

🎁 Bonus: tips & tricks

Chaining

Many of the methods mentionned above return an array, which allow us to chain them like so:

const fruits = [
  { name: "apple", quantity: 3 },
  { name: "orange", quantity: 5 },
  { name: "pear", quantity: 1 },
  { name: "banana", quantity: 0 },
]
fruits
    .sort((fruit1, fruit2) => fruit2.quantity - fruit1.quantity)
    .filter(fruit => fruit.quantity > 0)
    .map(fruit => `${fruit.name} (${fruit.quantity})`)
    .join(', ')
// > 'orange (5), apple (3), pear (1)'

Spreading

There are various use cases when spreading an array is really useful:

// 1. Make a copy of an array
const arrayCopy = [...originalArray]

// 2. Add elements in the array
const arrayWithNewElements = [newItem, ...originArray, anotherItem] 

// 3. Merge arrays
const mergedArrays = [...array1, ...array2, ...array3]

// 4. Convert a Set into an Array
const arrayFromSet = [...new Set(elements)]

// 5. Populate an empty array
const populatedArray = [...new Array(10)].map((_, idx) => idx)
// > [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

// 6. Convert an array to an object
const fruits = ['apple', 'orange', 'banana', 'kiwi']
console.log({...fruits})
// > { '0': 'apple', '1': 'orange', '2': 'banana', '3': 'kiwi' }

Remove duplicates

3 ways to remove duplicates from an array:

const array = ['🐑',1,2,'🐑','🐑',3,4];

// OPTION 1 
// Convert to a set and back to an array with the spread operator
const distinct_array = [...new Set(array)];

// OPTION 2 
// Use filter
const distinct_array = array.filter((item, idx) => array.indexOf(item) === idx);

// OPTION 3
// Use reduce
const distinct_array = array.reduce((unique, item) =>
  unique.includes(item) ? unique : [...unique, item]
)

Empty an array

const fruits = ['apple', 'orange', 'banana', 'kiwi']
fruits.length = 0
console.log(fruits)
// > []

Remove falsy values

const values = [false, 12, 'test', null, true]
values.filter(Boolean)
// > [ 12, 'test', true ]

That's all for today's breakfast folks. If you liked this post, feel free to share it with your friends/colleagues and leave your thoughts in the comments!

Have a fantastic day,

With 🧡, Yohann

New ES2021 JavaScript features (now available)

Yohann Legrand — Tue, 29 Jun 2021 20:30:38 +0000

Photo by James Harrison

☕️ Read this article on my blog

In case you missed it, the new ES2021 JavaScript features have been recently approved by the Ecma General Assembly and are now already supported by recent versions of the most popular browsers, yeay 🎉

📝 Note: For older browsers support (which you should definitely care about), you will need to set up your project with the Babel compiler. Babel will "translate" those new features to some JavaScript that older browsers can understand. Try it out on the Babel homepage!

Logical Assignment Operators

📙 Proposal

1. Logical nullish assignment (`??=`)

x ??= y will only assign y to x if x is nullish (i.e. null or undefined)

// Example 1: x is nullish
let x
const y = 'Chuck Norris'
// ✅ x is assigned 'Chuck Norris'
x ??= y

// Example 2: x is not nullish
let x = 1
const y = 2
// 🔴 x is not assigned 2, its value remains 1
x ??= y 

// Translates to this
x ?? (x = y)
// or this
if (x === null || typeof x === 'undefined') {
    x = y
}

2. Logical OR assignment (`||=`)

x ||= y : this one is similar to ??=, except it only assigns y to x if x is falsy

// Example
let x = 0
const y = 2
// ✅ x is assigned 2
x ||= y

// Translates to this
x || (x = y)
// or this
if (!x) {
    x = y
}

3. Logical AND assignment

x &&= y is the exact opposite of x ||= y : it assign y to x if x is truthy

// Example
let x = 1
const y = 2
// ✅ x is assigned 2
x &&= y

// Translates to this
x && (x = y)
// or this
if (x) {
    x = y
}

Numeric separator

📙 Proposal

I have been waiting for this one for a long time. It simply improves readability of big numbers, without changing anything to performance nor equality:

// Before
const bigNumber = 19432482347 // => ??? hard to read

// Now
const readableBigNumber = 19_432_482_347 // here we go, much better 😇

String.replaceAll

📙 Proposal

String.prototype.replaceAll(searchValue, replaceValue)

Until now, we had String.prototype.replace which replaced the first occurrence * of a pattern in a string. In order to replace *every occurrence, we had to use a regular expression with the global flag:

// String.prototype.replace (searchValue, replaceValue)

const str = "This is a test, I repeat, this is a test"
str.replace(/test/g, 'success')
// output: This is a success, I repeat, this is a success

There is also a trick which consists of using the split and join methods:

str.split('test').join('success')
// output: This is a success, I repeat, this is a success

This can now be done using the replaceAll method:

str.replaceAll('test', 'success')
// output: This is a success, I repeat, this is a success

Just like with String.prototype.replace, searchValue can be a regular expression, but it has to include a global flag, otherwise it will throw an exception. As mentioned in the proposal:

This is done to avoid the inherent confusion between the lack of a global flag (which implies "do NOT replace all") and the name of the method being called (which strongly suggests "replace all").

Promise.any

📙 Proposal

Promise.any([promise1, promise2, promise3]).then(...).catch(...)

Promise.any is a new promise method that takes an array of promises and resolves with the value of the first promise to successfully resolve. It will throw an AggregateError if all the promises are rejected.

This snippet (from the proposal) checks which endpoint responds the fastest, and then logs it:

Promise.any([
  fetch('https://v8.dev/').then(() => 'home'),
  fetch('https://v8.dev/blog').then(() => 'blog'),
  fetch('https://v8.dev/docs').then(() => 'docs')
]).then((first) => {
  // Any of the promises was fulfilled.
  console.log(first);
  // → 'home'
}).catch((error) => {
  // All of the promises were rejected.
  console.log(error);
});

WeakRefs and Finalizers

📙 Proposal

Those new features come together in the same proposal in order to add the ability to:

create weak references to objects with the WeakRef class
running user-defined finalizers after objects are garbage-collected, with the FinalizationRegistry class

I won't go into more details about those features as they are quite advanced, and, as the proposal states:

Their correct use takes careful thought, and they are best avoided if possible.

But if you're interested, feel free to read more in the original proposal.

That's all for today folks, have a fantastic day!

With 🧡, Yohann

(Part 1) Build quality forms with React 🚀

Yohann Legrand — Wed, 16 Jun 2021 13:16:31 +0000

Photo by Kelly Sikkema

☕️ Read this article on my blog

When it comes to building forms with React, there are tons of possibilities out there in the React Ecosystem. Many libraries have emerged to answer specific needs, and it can be a little bit overwhelming at first: which one to choose? what strategy to adopt?

Even without using a library, just using pure React, you can basically go two ways: controlled or uncontrolled. We will briefly discuss this, so if you're new to React, you might want to start there.

If you already know all about controlled VS uncontrolled forms, you can skip the first part and jump right to the second one, where I will show you how I like to build my forms today: using react-hook-form, yup and TypeScript. Those tools allow me to quickly build any type of form with a great Developer Experience and confidence about their robustness and stability.

Ready to become a Form Master? Let's go 🚀

Controlled VS Uncontrolled

To start with the basics, I wanted to show you the difference between what we call Controlled forms and Uncontrolled forms. To understand this, you just need to know one thing: when an input value is controlled by React using a state value and a change handler, then it's a controlled input.

This means an uncontrolled input works just like a form element outside of React: when the user inputs data into the field, the updated information is reflected without React needing to do anything.

Nothing like some code to get a good grasp of it:

Controlled Form

function ControlledForm() {
    // We maintain state values for our inputs
  const [username, setUsername] = React.useState('')
  const [password, setPassword] = React.useState('')

  function onSubmit(event) {
        // During the submit phase, we simply need to access
        // the input values from our component's state
    event.preventDefault()
    console.log(username, password)
  }

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="username">Username</label>
      {/**
        * Remember, we need a value and an onChange handler
        * for the input to be considered controlled
        **/}
      <input
        id="username"
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />

      <label htmlFor="password">Password</label>
      <input
        id="password"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />

      <button type="submit">Login</button>
    </form>
  )
}

Uncontrolled Form

function UncontrolledForm() {
    // In the onSubmit handler, we get the form values
    // from the event itself (input are referenced by their name)
  function onSubmit(event) {
    event.preventDefault()
    const { username, password } = event.target
    console.log(username.value, password.value)
  }

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="username">Username</label>
      <input id="username" name="username" type="text" />

      <label htmlFor="password">Password</label>
      <input id="password" name="password" type="password" />

      <button type="submit">Login</button>
    </form>
  )
}

Additional notes

When using a controlled input, its state value should always be initialized with a value (like an empty string for text input). If you initialize it to null or undefined (React.useState() will initialize the state value to undefined), React will consider your input uncontrolled. And because you update the state value with a change handler as soon as the user starts typing something in the input, you will get this warning:

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

So, do as our friend React says, and decide between controlled and uncontrolled, but do not mix both 😇

For simple forms like the one above, going uncontrolled is totally fine. However, as soon as you want to do some form validation or to control an input value in any way, your life will be way easier with controlled inputs.

react-hook-form + yup + TypeScript = ❤️

Since I started using React, I have tried many libraries and tools to build the forms I was working on. Today, I ALWAYS use react-hook-form and yup, because I think those two libraries are amazing and work really well together. They abstract a lot of things that can become quite tedious and repetitive over time, and they give me all the control I need to build performant, flexible, and extensible forms for pretty much all use cases.

Because I now always work with TypeScript, I will also show you the benefit of using it when building forms. If you're not familiar with TypeScript, don't worry, there won't be too much of it and it should be easy to understand. That being said, I strongly recommend you start learning it, I promise it will change your life as a web developer!

Here is a great book to start learning TypeScript: https://typescript-book.com/

What is react-hook-form?

This library leverage the power of hooks to gain full control over uncontrolled inputs. It's really easy to use and takes a small amount of code, which is one of their main goals:

Reducing the amount of code that you have to write is one of the primary goals for React Hook Form.

It's also a tiny library without any dependencies, packed with optimizations to minimize the number of re-renders and fasten component mounting.

It works like this (code sample from their documentation):

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";

type Inputs = {
  example: string,
  exampleRequired: string,
};

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();

  const onSubmit: SubmitHandler<Inputs> = data => console.log(data);

  console.log(watch("example")) // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />

      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}

      <input type="submit" />
    </form>
  );
}

That's it! With a few lines of code, you get a functional, type-safe form with basic validation. You just need to register your inputs using the register function, wrap your submit handler in the handleSubmit for validation, render any errors that might have occurred during previous validations. To do so, you get all those utilities back from the useForm call.

There is a lot more that you can do with this library, but in order to keep this post concise I will encourage you to visit their official documentation if you want to learn more about it: https://react-hook-form.com/get-started

⚠️ Spoiler alert: there will be a real-life example at the end, where I'll show you how to build a login and a registration form.

What is Yup?

Yup is a Javascript object schema validator: it lets you define a schema to describe how a valid object should look like, and allows you to validate an object using this schema. If you know Joi, Yup is heavily inspired by it, except it relies on client-side validation as its primary use-case.

According to their documentation:

Yup is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of an existing value, or both. Yup schemas are extremely expressive and allow modeling complex, interdependent validations, or value transformations.

Here is basic example of how it works:

// First, you define an object schema for your validation
let schema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().required().positive().integer(),
  email: yup.string().email(),
  website: yup.string().url(),
  createdOn: yup.date().default(function () {
    return new Date();
  }),
});

// check validity of an object
schema
  .isValid({
    name: 'jimmy',
    age: 24,
  })
  .then(function (valid) {
    valid; // => true
  });

If you want to learn more, check their docs. What I personally love about Yup is the readability of it, and how verbose the schema is. For example, in the schema above, you can literally read out loud "ok, age is a number, is required, and must be a positive integer". That's great!

Now it's time to see how react-hook-forms and yup work side by side. Check out part 2 of this article to see how this is done, along with practical examples: a login form, and a registration form.

Master the art of React.useEffect

Yohann Legrand — Wed, 12 May 2021 12:14:15 +0000

Photo by Jordan McDonald @unsplash

Read this article on my blog

When I started learning React, I made a few mistakes with the way I was using React.useEffect, especially managing the dependencies. My effects kept on running when I didn't want them to run, causing strange bugs in my apps. So today I would like to share with you a few things I learned along the way about this hook. Hopefully, it will help clear things out for you.

`React.useEffect`, a lifecycle hook ?

⛔️ NOPE, it is not !

Developers often misunderstand useEffect as a lifecycle hook, coming from class components where we had things like componentDidMount or componentWillUnmount. While we can achieve similar behavior with useEffect, it is not correct to say that this hook represents a certain time in the lifecycle of a component.

In fact, useEffect is nothing but a mechanism for synchronizing side effects with the state of your app. This means that the code you place inside this hook will only run if a certain state of your app changes.

To quote Ryan Florence:

The question is not "when does this effect run" the question is "with which state does this effect synchronize with"

Nothing better than a simple example to understand this:

function HelloWorld() {
  const [greeting, setGreeting] = React.useState("Hello")
  const [subject, setSubject] = React.useState("World")
  // You can ignore this, it's just a trick to trigger a re-render on demand
  const [_, reRender] = React.useState()

  // useEffect #1
  React.useEffect(() => {
    console.log(
      'SOMETHING changed in "HelloWorld" component, or "HelloWorld" re-rendered'
    )
  }) // <- no dependencies !

  // useEffect #2
  React.useEffect(() => {
    console.log("I will only log once, as I synchronize with NOTHING")
  }, []) // <- empty array as dependencies

  // useEffect #3
  React.useEffect(() => {
    console.log("greeting AND/OR subject changed")
  }, [greeting, subject]) // <- greeting and subject as dependencies

  return (
    <div>
      <button onClick={() => reRender({})}>Force re-render</button>
      <div>
        <label htmlFor="greeting">Greeting : </label>
        <input
          id="greeting"
          value={greeting}
          onChange={(event) => setGreeting(event.target.value)}
        />
      </div>
      <div>
        <label htmlFor="subject">Subject : </label>
        <input
          id="subject"
          value={subject}
          onChange={(event) => setSubject(event.target.value)}
        />
      </div>
      <p>
        {greeting} {subject}
      </p>
    </div>
  )
}

🔗 Here is a link to the code sandbox

In this <HelloWorld /> component, we have 3 useEffect that will synchronize with different state changes:

useEffect #1 ⇒ has no dependencies, so everytime the component gets re-rendered (meaning something changed), the code inside this useEffect will be executed
useEffect #2 ⇒ has an empty array as dependencies, so it synchronizes with nothing, meaning it will be run only once, after the first time the component is rendered
useEffect #3 ⇒ has subject and greeting as dependencies, so it synchronizes with those state changes. Every time one value or the other changes, the code inside this useEffect will be executed

Let's take a look at the output in the console when we land on the page:

All hooks are run, because:

useEffect #1 ⇒ component rendered
useEffect #2 ⇒ nothing changed (first render)
useEffect #3 ⇒ greeting and subject changed because we initialized their states with the values 'Hello' and 'World'

What happens if the component re-renders, without any state change (thanks to the "Force re-render" button I've included)?

The only useEffect that was executed was our #1: because it has no dependencies, it gets executed every time something changes. The component re-rendered, this means something changed in the app (either a state in the component, or in the parent component), so this side effect is triggered.

Now if I type a single character in the greeting's input, let's see what happens (🧐 can you guess ?)

useEffect #1 got executed again because something changed
useEffect #3 got executed because greeting changed (I added a coma)

At this point, our useEffect #2 will never run again, it already has done its job, which was synchronized with nothing.

🤔 OK Yohann, this is all wonderful, useEffect has nothing to do with component lifecycle and all that, but I still want to know when this code is being executed!

I hear you. Your effects run (if one of their dependencies changed) after the render, DOM updates and screen painting phases, as you can see in this great diagram by Donavon :

I won't go into more details about this hook flow here, but the main thing to take out from this is the quote from Ryan Florence I mentioned earlier:

The question is not "when does this effect run" the question is "with which state does this effect synchronize with"

Let that sink in, and you'll be fine 👌

Managing dependencies

Now that we're on the same page, let's talk about something called "memoization". Sometimes, in your useEffect, you will need to include a function in your dependencies. Consider this:

function Counter() {
  const [count, setCount] = React.useState(10)

  const alertCountOver = () => console.log('Count is too high !');

  React.useEffect(() => {
    console.log('running check on count value')
    if (count > 100) {
      alertCountOver()
    }
  // we wan't to run our check on the count value whenever count
  // or alertCountOver change
  }, [count, alertCountOver])


  return (
    <div className="counter">
      <p>Count = {count}</p>
      <button onClick={() => setCount(prev => prev + 50)}>Add 50</button>
    </div>
  );
}

You might think that this is perfectly fine: whenever count change, we check its value, and if it is over 100 we call alertCountOver. Also, because we want to make sure that we call the up-to-date version of alertCountOver, we include it in the dependencies of our hook (also because eslint told you to do so).

Well, here's what's actually going to happen: every time the Counter component is going to re-render (because its parent re-render, for example), the alertCountOver function is going to be re-initialized. This means it will change every render, so our useEffect will be called, even if count didn't change 😤

This is because React relies on value stability for useEffect dependencies, and this is the problem that React.useCallback solves:

const alertCountOver = React.useCallback(
  () => console.log('Count is too high !'), // our function goes here
  [] // this is the dependencies for the memoized version of our function 
)

React.useEffect(() => {
  console.log('running check on count value')
  if (count > 100) {
    alertCountOver()
  }
// alertCountOver is now stable 🎉
}, [count, alertCountOver])

We still create a new function on every render, but if its dependencies didn't change since the previous render, React will give us back the exact same function (the "memoized" version). So now our useEffect will only be executed if one of the following condition is true:

count value changed
alertCountOver changed, which is not possible, regarding the fact that its dependencies are empty

Now if we wanted to include the count in the log message, we would also need to include count in the dependencies of the callback:

const alertCountOver = React.useCallback(
  () => console.log(`Count ${count} is too high !`),
  [count]
)

This means that every time count changes, the memoized version of alertCountOver will be updated to reflect this change.

➡️ To wrap things up: as long as you include something in your dependencies, ask yourself "Is the value of something stable, or is it going to change every render ?". If the answer is yes, then you probably need to memoize it, otherwise your effect will run when you do not expect it to run.

📝 Note: sometimes, the easiest way is simply to move the function outside of your component (at the top of the file, or in another file). This way, it becomes stable by nature and there is no need to memorize it.

To read more about "memoization" and "value stability", check out this great article.

Good practices

I'll finish this article by mentioning a few good practices when it comes to using useEffect in your apps.

#1 - If you must define a function for your effect to call, then do it inside the effect callback, not outside.

As practical as it is to use useCallback as we did before, it's not always a good idea. In fact, this adds more complexity in your codebase, and it's always good to avoid that as much as possible. Every line of code that is executed comes with a cost, and wrapping everything in useCallback is certainly not a good idea. useCallback is doing more work than just a simple function declaration. So, when it can be avoided, it should be.

That was precisely the case in our (very contrivied) previous example, and the solution is quite simple:

React.useEffect(() => {
  const alertCountOver = () => console.log('Count is too high !')
  if (count > 100) {
    alertCountOver()
  }
}, [count])

No more need to include the function in our dependencies: because it's only being used by the useEffect, its place is within this useEffect. Of course, this example is still really stupid, but you get my point. In the real world, this would translate into something like this, for example:

React.useEffect(() => {
  const sendAlertToServer = async () => {
    // Make a POST request to tell our backend that count exceeded 100
    const res = await fetch("/countAlert", {
      method: "POST",
      body: JSON.stringify({ count }),
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    })
    return res
  }

  if (count > 100) {
    sendAlertToServer()
  }
}, [count])

#2 - Seperate concerns with multiple useEffect

I've seen people building huuuuuge useEffect in their components, to do all sorts of things in one place. Don't do that. You will just end up managing a giant list of dependencies, resulting in confusion, potential bugs, and headbanging on the wall to try and solve them. Remember that you can separate everything in multiple useEffect, each having its own dependencies. The code will not only be much more readable but way easier to maintain.

// Use Effect - component mounted
React.useEffect(() => {
    doSomethingOnMount()
    checkSomething()
    printSomething()
}, [])

// Use Effect - form related syncs
React.useEffect(() => {
    validateForm()
    submitForm()
    resetPage()
, [formData])

// Use Effect - specific checks 
React.useEffect() => {
    if (value !== otherValue) {
        doSomethingElse()
    } else {
        doSomethingMore()
    }
}, [value, otherValue])

#3 - Clean after yourself

Something I did not mention before: you can return a function in your useEffect hook, and React will execute this function when the component is being unmounted:

React.useEffect(() => {
    // Do something...
    return () => {
        // Clean up
    }
}, [])

This is not only useful, but strongly recommended when doing things like attaching event listeners to the window object:

React.useEffect(() => {
    // Define the event listener
    const scrollListener = () => {
        console.log(window.pageYOffset)
    }

    // Attach it to the "scroll" event of the window
    window.addEventListener('scroll', scrollListener);

    return () => {
        // Clean up phase: remove event listener from the window
        window.removeEventListener('scroll', scrollListener);
    }
}, [])

Trust me, this will save you the pain of debugging some really weird stuff going on in your app 😇

Conclusion

Wow, you're still there? Congrats on taking the time to sharpen your understanding of this wonderful useEffect hook. I hope this post was useful to you somehow, and that it will save you some time when you will be building React Components in the future. React hooks are absolutely amazing but can definitely cause you some troubles if you don't understand what's behind them.

Feel free to let me know your thoughts about this, or to share any additional good practices that I didn't mention here. And in the meantime, don't forget to eat JavaScript for breakfast ☕️ and have a good one!

Ever wonder what React does?

Yohann Legrand — Mon, 10 May 2021 19:12:44 +0000

Photo by Ferenc Almasi @unsplash

Read this article on my blog

When we use React and JSX in our web applications, it's important to remember that we are "just" using an abstraction of the browser API methods.

In fact, JavaScript has a set of imperative methods that you can use to interact with the DOM, while React abstracts those methods to offer your a declarative approach.

💡 If you're not sure what "imperative" and "declarative" means, here's a brief explanation:

Imperative is a concept that implies telling HOW to do something (technically speaking)
Declarative implies telling WHAT to do

This is why it's called an abstraction because we don't need to know HOW it's gonna be done, we just want it done. For more details about those concepts, I recommend you check this great article.

I think it's important (and interesting) to understand how these abstractions work, what they do, and how they do it. This gives you more confidence as a developer and allows you to use them more efficiently.

So, let me take you on a quick journey from the good old times to the beautiful React components of nowadays 🚀

1. The imperative way

Let's see how you can interact with the browser DOM with pure JavaScript. Our goal here is to render a paragraph on the page.

<!-- index.html -->
<body>
  <script type="text/javascript">
    // First, we need to create a div that will be the root element
    const rootNode = document.createElement("div")
    // Let's give it the id "root" and the class "container"
    rootNode.setAttribute("id", "root")
    rootNode.setAttribute("class", "container")
    // And finally add it to the DOM
    document.body.append(rootNode)

    // Sweet 👌 Now we need to create our paragraph
    const paragraph = document.createElement("p")
    paragraph.textContent = "Welcome, dear user !"
    // and add it to the root div
    rootNode.append(paragraph)
  </script>
</body>

So basically, we tell the browser to create a div with the id root and the class container, and to insert it inside the body tag. Then we create and add a paragraph inside that div. Here's the output:

2. React APIs

Now let's change this to use React. We actually only need 2 packages:

React: responsible for creating React elements
ReactDOM: responsible for rendering those elements to the DOM

React supports multiple platforms. ReactDOM is used when writing web applications. For mobile apps, you would use the appropriate React Native package to render your elements.

Note: normally, you would create your project with a tool like create-react-app or get React and ReactDOM scripts from a package registry. Here we use a CDN for demonstration purposes

<!-- index.html -->

<body>
  <!-- The root div is placed directly in the HTML -->
  <!-- We could also create it like before, and append it to the body -->
  <div id="root"></div>

  <!-- We import React and ReactDOM -->
  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>

  <script type="module">
    const rootNode = document.getElementById("root")

    // Create the paragraph
    const element = React.createElement("p", null, "Welcome, dear user !")

    // Render the paragraph inside the root node
    ReactDOM.render(element, rootNode)
  </script>
</body>

With this in place, the generated HTML is exactly the same as before, with the extra imports for React and ReactDOM:

React.createElement() takes three arguments: type, props and children. This means that if we wanted our paragraph to have the className "welcome-text", we would pass it as a prop:

React.createElement("p", { className: "welcome-text" }, "Welcome, dear user !")

We could also pass the children as prop, instead of passing it as the third argument:

React.createElement("p", {
  className: "welcome-text",
  children: "Welcome, dear user !",
})

The children prop can take an array for multiple children, so we could also do:

React.createElement("p", {
  className: "welcome-text",
  children: ["Welcome,", "dear user !"],
})

Or we can even add all the children after the second argument, as individual arguments:

React.createElement(
  "p",
  { className: "welcome-text" },
  "Welcome, ",
  "dear user !"
)

If you're curious about the element returned by React.createElement, it's actually quite a simple object that looks like this:

{
  type: "p",
  key: null,
  ref: null,
  props: { className: "welcome-text", children: ["Welcome, ", "dear user !"]},
  _owner: null,
  _store: {}
}

The renderer's job, in our case ReactDOM.render's job, is simply to interpret that object and create the DOM nodes for the browser to print. This is why React has a different renderer for each supported platform: the output will vary depending on the platform.

So, this is all great, but you can start to see what a pain it would be the create more complex UI by using just those APIs. For example, let's say we need to make the following changes to our page:

Place the paragraph inside a div
Give the div an id "container"
"dear user" should be in bold
Place a button inside the div, with the text "Say Hi" that logs "Hi !" in the console when clicked

Here's how we would implement those changes:

<!-- index.html -->
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>

  <script type="module">
    const rootNode = document.getElementById("root")

    // Container div
    const element = React.createElement("div", {
      id: "container",
      children: [
        // Paragraph
        React.createElement("p", {
          className: "welcome-text",
          children: [
            "Welcome, ",
            // "dear user" text wrapped inside a strong tag
            React.createElement("strong", null, "dear user"),
            " !",
          ],
        }),
        // "Say Hi" button
        React.createElement("button", {
          onClick: () => console.log("Hi !"),
          children: "Say Hi",
        }),
      ],
    })

    // Render the paragraph inside the root node
    ReactDOM.render(element, rootNode)
  </script>
</body>

HTML Output:

<div id="root">
  <div id="container">
    <p class="welcome-text">Welcome, <strong>dear user</strong> !</p>
    <button>Say Hi</button>
  </div>
</div>

While it works perfectly, I think it is safe to say that nobody wants to build UIs like this. And this is where JSX comes in.

3. JSX to the rescue

JSX is a syntax extension to JavaScript, and it allows us to do things like this:

const paragraph = <p className="welcome-text">Welcome, dear user !</p>

The browser won't understand this by itself, so we need a compiler like Babel which will turn this code into a React.createElement call:

const paragraph = React.createElement(
  "p",
  {
    className: "welcome-text",
  },
  "Welcome, dear user !"
)

JSX's power, besides being able to nest elements in an HTML-like way, resides in what is called "interpolation". Everything you put inside { and } will be left alone and use to compute the values of props and children of createElement :

const ui = (
  <div id="greetings">
    Hello {firstname} {lastname} !
  </div>
)

Compiled version:

const ui = React.createElement(
  "div",
  {
    id: "greetings",
  },
  "Hello ",
  firstname,
  " ",
  lastname,
  " !"
)

With JSX in our toolbox, we can now rewrite the previous implementation in a much more clean and easy way. We will include Babel as a CDN and change our script type to text/babel so that our JSX expressions get compiled down to React.createElement calls:

<!-- index.html -->
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

  <script type="text/babel">
    const rootNode = document.getElementById("root")

    // Container div
    const element = (
      <div id="container">
        <p className="welcome-text">
          Welcome, <strong>dear user</strong> !
        </p>
        <button onClick={() => console.log("Hi !")}>Say Hi</button>
      </div>
    )

    // Render the paragraph inside the root node
    ReactDOM.render(element, rootNode)
  </script>
</body>

Much better 😇 Back in the browser, we can see our UI with the generated DOM (including our untouched "text/babel" script):

If we take a look in the <head> tag, we can see that Babel added a script for us with the compiled version of our JavaScript and JSX:

Babel basically compiles down all our JSX code to nested React.createElement calls for us. How nice of him. Thanks to interpolation, we can also use variables for things that we want to use more than once in our JSX:

const rootNode = document.getElementById("root")

const greetingButton = (
  <button onClick={() => console.log("Hi !")}>Say Hi</button>
)

// Container div
const element = (
  <div id="container">
    {greetingButton}
    <p className="welcome-text">
      Welcome, <strong>dear user</strong> !
    </p>
    {greetingButton}
  </div>
)

// Render the paragraph inside the root node
ReactDOM.render(element, rootNode)

Compiled version (thanks again, Babel !):

var rootNode = document.getElementById("root")

var greetingButton = React.createElement(
  "button",
  {
    onClick: function onClick() {
      return console.log("Hi !")
    },
  },
  "Say Hi"
)

// Container div
var element = React.createElement(
  "div",
  { id: "container" },
  greetingButton,
  React.createElement(
    "p",
    { className: "welcome-text" },
    "Welcome, ",
    React.createElement("strong", null, "dear user"),
    " !"
  ),
  greetingButton
)

// Render the paragraph inside the root node
ReactDOM.render(element, rootNode)

Now we could use a function instead of a variable for our button. This way, we could pass as props the text for the button and the message to log in the console:

const rootNode = document.getElementById("root")

const greetingButton = (props) => (
  <button onClick={() => console.log(props.message)}>{props.children}</button>
)

// Container div
const element = (
  <div id="container">
    {greetingButton({ message: "Hi !", children: "Say Hi" })}
    <p className="welcome-text">
      Welcome, <strong>dear user</strong> !
    </p>
    {greetingButton({ message: "Bye !", children: "Say Bye" })}
  </div>
)

// Render the paragraph inside the root node
ReactDOM.render(element, rootNode)

And if we look at the compiled version of our greetingButton function:

var rootNode = document.getElementById("root")

var greetingButton = function greetingButton(props) {
  return React.createElement(
    "button",
    {
      onClick: function onClick() {
        return console.log(props.message)
      },
    },
    props.children
  )
}

// Container div
var element = React.createElement(
  "div",
  { id: "container" },
  greetingButton({ message: "Hi !", children: "Say Hi" }),
  React.createElement(
    "p",
    { className: "welcome-text" },
    "Welcome, ",
    React.createElement("strong", null, "dear user"),
    " !"
  ),
  greetingButton({ message: "Bye !", children: "Say Bye" })
)

// Render the paragraph inside the root node
ReactDOM.render(element, rootNode)

We see that it is now a function returning a React.createElement, and its value is used as a children argument of the createElement for the main element.

I think you see where this is going...

4. React Components

With our greetingButton, we are one step away from the traditional React Components. In fact, it would be nice to be able to use it like this:

const element = (
  <div id="container">
    <greetingButton message="Hi !">Say Hi</greetingButton>
    <p className="welcome-text">
      Welcome, <strong>dear user</strong> !
    </p>
    <greetingButton message="Bye !">Say Bye</greetingButton>
  </div>
)

But here's what happens if we do so, back in the browser:

The buttons aren't "buttons", we just see their texts (= children) in the page. Because <greetingButton> is in the DOM without being a valid HTML tag, the browser doesn't know what to do with it. ReactDOM is telling us why in the console:

Warning: <greetingButton /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

Warning: The tag <greetingButton> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Because greetingButton doesn't start with an uppercase letter, Babel compiles our code to this:

React.createElement("greetingButton", { message: "Hi !" }, "Say Hi"),
// ...
React.createElement("greetingButton", { message: "Bye !" }, "Say Bye")

greetingButton is used as string for the type of the element, which results in a greetingButton HTML tag that the browser don't understand.

So let's change our greetingButton to be a React Component:

const rootNode = document.getElementById("root")

const GreetingButton = (props) => (
  <button onClick={() => console.log(props.message)}>{props.children}</button>
)

// Container div
const element = (
  <div id="container">
    <GreetingButton message="Hi !">Say Hi</GreetingButton>
    <p className="welcome-text">
      Welcome, <strong>dear user</strong> !
    </p>
    {/** This is functionnaly equivalent to the other GreetingButton */}
    <GreetingButton message="Bye !" children="Say Bye" />
  </div>
)

// Render the paragraph inside the root node
ReactDOM.render(element, rootNode)

Starting to look familiar ? 😉 Let's take a look at the compiled code:

var rootNode = document.getElementById("root")

var GreetingButton = function GreetingButton(props) {
  return React.createElement(
    "button",
    {
      onClick: function onClick() {
        return console.log(props.message)
      },
    },
    props.children
  )
}

// Container div
var element = React.createElement(
  "div",
  { id: "container" },
  React.createElement(GreetingButton, { message: "Hi !" }, "Say Hi"),
  React.createElement(
    "p",
    { className: "welcome-text" },
    "Welcome, ",
    React.createElement("strong", null, "dear user"),
    " !"
  ),
  React.createElement(GreetingButton, { message: "Bye !" }, "Say Bye")
)

// Render the paragraph inside the root node
ReactDOM.render(element, rootNode)

We can see that our component is now used as the type for React.createElement, which is much better. At render time, our component (= function) will be called and the returned JSX will be injected in the DOM:

<div id="root">
  <div id="container">
    <button>Say Hi</button>
    <p class="welcome-text">Welcome, <strong>dear user</strong> !</p>
    <button>Say Bye</button>
  </div>
</div>

So, however you write your React Component, at the end of the day, it's just a function that returns JSX and it all gets compiled down to React.createElement:

const GreetingButton = (props) => (
  <button onClick={() => console.log(props.message)}>{props.children}</button>
)

// Same result, different writing:
function GreetingButton({ message, children }) {
  return <button onClick={() => console.log(message)}>{children}</button>
}

Conclusion

I hope you learned a few things by reading this post. I think this is really interesting to know what's going on "under the hood" when writing React Components. The more you can compile down JSX in your head, the more efficient you will be using it. Feel free to play around in the Babel playground to see what's the output of the JSX you write in real-time!

This post was inspired by this great article by Kent C. Dodds: What is JSX?

`console.log` like a pro

Yohann Legrand — Mon, 10 May 2021 19:08:57 +0000

Photo by Markus Spiske @unsplash

Read this article on my blog

Today I wanted to share with you a few tips about the one and only console object, which provides access to the browser debugging console for developers. I have been using it since the very first time I learned about web development (about 10 years ago), and I have learned some useful tips along the way to be more efficient while using it. Without further ado, let's dive in.

Output types

Let's start with the basics, which is controlling the type of output when printing messages in the browser console. console.log being the generic output, it can be useful to know how to be more specific:

ℹ️ Information: console.info()
⚠️ Warning: console.warn()
🚨 Error: console.error()

I personally don't use console.info that much, but I definitely use warn and error a lot, for example when a call to an API went wrong.

Formatting

Simple variables

Quite often, we want to console.log variables values, to understand what's going on at some point in our code. There are a few options here:

const userName = "foo"
const userEmail = "foo@bar.com"

// TIP: `console.log` accepts any number of arguments, it will just concatenate a `toString()` representation of each argument to the console
console.log("user is ", userName, userEmail)
// > user is foo foo@bar.com

// You can also use template literal strings:
console.log(`user is ${userName} ${userEmail}`)
// > user is foo foo@bar.com

Objects

When printing objects or arrays, most of the time console.log will do the job, but I found out that using console.dir can provide the developer with a better view of the printed object. The behaviors of these methods can differ slightly from a browser to another, but the main difference is that console.log will print a toString representation of the object, while console.dir will print a navigable tree. This is particularly true when printing out DOM objects with Chrome, as shown by the screenshot below:

Tabular data

Finally, depending on the data you're working with, sometimes a table view can be way more practical than a tree view. This one can save you a lot of "click click click" 😇. Let's take a look at this simple example. We have this array of objects, representing our users, and we want to print it in the browser console:

const users = [
  { username: "foo", email: "foo@foo.com", isActive: true },
  { username: "bar", email: "bar@bar.com", isActive: false },
  { username: "joe", email: "joe@gmail.com", isActive: true },
]

Here's what the output will be in the console, using console.log versus console.table:

Pretty neat, right?

Styling

Who said console outputs need to be plain and sad? console.log method actually supports inline styling, and I think this is really cool:

Sexy, isn't it? Here is how it works: you just need to prefix your message with "%c", and pass inline CSS rules as the second argument.

console.log("%c <message>", "<inline CSS>")

// Example
console.log("%c hello world", "color: white; background-color: tomatoe")

If you wanna go wild with CSS3, well, you can!

var styles = [
  "background: linear-gradient(#035E7B, #62B6CB)",
  "border: 1px solid white",
  "color: white",
  "display: block",
  "text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)",
  "box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset",
  "line-height: 40px",
  "text-align: center",
  "font-weight: bold",
]

console.log("%c This is a really sexy message", styles.join(";"))

Debugging

Seeing the meme at the beginning of this post, you might have wondered...

Is console.trace really a thing?

Yes it is, and it can come up quite handy in certain situations:

The console interface's trace() method outputs a stack trace to the Web Console.

This can help you get a better understanding of what's going on, which methods are called in which order, and where it's crashing. But there is a better way: our friend the debugger!

Depending on your project/editor configuration, it can be a bit tricky to run a debug mode. Luckily for us, the Chrome dev-tools provide a very useful command to pause the execution of our code and inspect variables:

function saveUser(user) {
  // ...
  debugger // Yep, it doesn't get much easier
  // ...
}

This will open up the JavaScript debugging pane of the developer tools, allowing you to inspect, step into the next function call, resume execution, etc. For more information about the Chrome DevTools debugger, check out this great article.

CodeSandbox & Github Magic

Yohann Legrand — Thu, 15 Apr 2021 08:24:06 +0000

Photo by Rhett Wesley @unsplash

Read this article on my blog

If you're into web development, you probably already know what CodeSandbox is, and you sure know what Github is (if not, well, time to leave your cave 😁). For those who never used CodeSandbox, here's what it does:

CodeSandbox is an online editor for rapid web development. With CodeSandbox, you can prototype quickly, experiment easily, and share creations with a click. Use it to create static sites, full-stack web apps, or components on any device with a web browser.

I personally use it a lot, I find it really useful to try some stuff in complete isolation, free of any constraint the project you're working on can have. It's also quite common to provide a sandbox with the minimum setup to reproduce a bug you're asking for help with.

That said, I recently learned some amazing tips & tricks to get more productive with these tools, and this was my reaction:

Wait, what? 😱 How am I only finding out about this now?

So I decided to make a quick post to share those with you, I hope you'll find it as useful as I do.

#1 Kickstart a sandbox

A common thing to do when creating a sandbox is to choose a template. Either you're working with just JavaScript, TypeScript, React, Vue, or Angular, they got a template for you so you can start coding right away.

Well, here's where the magic happens: go ahead and open a new tab in your browser, and type the URL js.new. Hold your breath, and press Enter...

✨ Tadaaaa ! Amazing, right?

You can now start coding with your favorite template in a split second. Also works with:

TypeScript - ts.new
React - react.new
Vue - vue.new
Angular - ng.new

And more...

2 - Turn a GitHub repo into a sandbox

Sweet, now that you know how to create a Code Sandbox from a template faster than Lucky Luke shot his gun, what if I tell you that you can do the same from a Github repository?

🔥 That's right! Open one of your favorite repo, and just insert box between github and .com :

https://githubbox.com/User/Repo

I love this one.

Bonus - VSCode in the browser (whaaat ?)

I'll leave you with this last one, my absolute favorite of all. Instead of inserting box between github and .com, if you insert 1s, it will open VSCode in your browser 😍

This makes it so easier to browse a repo and read the code through the entire project, just like you would do on your local machine.

Aaaand it's open-source, feel free to check it out: https://github.com/conwnet/github1s GitHub and "smash that star button" as they say.

Alright, that's all for today, I hope you enjoyed it. Feel free to leave your tips in the comment if you got something similar in-store, I really love those 👌

Lazy loading with React

Yohann Legrand — Wed, 16 Dec 2020 20:25:54 +0000

Photo by Priscilla Du Preez @unsplash

Read this article on my blog

Why you need lazy loading

Most of the time, you will have parts of your page that contain code and/or data for a component that won't be visible straight away, unless the user clicks somewhere or scroll the page. Loading all these resources can block the main thread and push how soon users will be able to interact with the page.

This can impact the performance of your website on metrics tools like Time to interactive or GTmetrix.

The faster your users can interact with the page, the better, isn't it?

Fake loading and lazy imports

The Lite Youtube Embed project by Paul Irish is a perfect example of fake loading: it takes a Youtube Video ID and presents only a thumbnail with a play button :

When the play button is clicked, this is when the actual Youtube player is being loaded in order to play the video. By doing that, the page load time is drastically decreased.

Here is the resulting page load with Lite Youtube Embed :

And without :

Live demo

Complex dialogs/modals are also a good use case for this. Initially, there is just a button displayed somewhere on the page. When the user clicks on this button, a modal would show up and allow him to perform various operations, quite often including the use of third party libraries or complex business logic. This is where the import-on-interaction pattern is a really good fit because you won't slow down the page load with code that the user might not even put to use. This is how it is done in Google Docs for the "Share" dialog :

When the button is clicked, the dialog component is loaded, saving 500KB of script for the share feature by deferring its load until user-interaction.

How does this work in React?

It's actually quite surprising how simple it is. When I found out, I immediately wanted to go back on my previous projects and implement it everywhere 😅

Here is a really basic example: let's say you would like to use the react-scroll library for a nicely animated "scroll to the top" feature, triggered when a button is clicked. Here is what your component would look like without the import-on-interaction pattern :

import { animateScroll as scroll } from "react-scroll";

const ScrollToTopBtn = () => {
  const handleClick = () => {
    scroll.scrollToTop();
  };

  return (
    <button onClick={handleClick}>
      Scroll to the top !
    </button>
  );
};

And with lazy loading :

const LazyScrollToTopBtn = () => {
  const handleClick = () => {
    import("react-scroll").then(scroll => {
      scroll.animateScroll.scrollToTop();
    });
  };

  return (
    <button onClick={handleClick}>
      Scroll to the top !
    </button>
  );
};

That's it ! Pretty cool, right ? Also, you can use object destructuring to import animateScroll directly :

const handleClick = () => {
  import("react-scroll").then(({animateScroll}) => {
    animateScroll.scrollToTop();
  });
};

React.lazy and Suspense

React comes with a built-in way of "code-splitting" your app, in order to reduce the size of your bundle. But first, what's code-splitting ? According to React official documentation :

Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app. While you haven’t reduced the overall amount of code in your app, you’ve avoided loading code that the user may never need and reduced the amount of code needed during the initial load.

With the React.lazy function and the Suspense Component, you can render a dynamic import as a regular component :

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Here, OtherComponent will only be loaded when MyComponent is first rendered. Suspense allows you to manage the loading state between the render of MyComponent and the moment OtherComponent will be available. This will result in OtherComponent being in a separate chunk of JavaScript. In a way, it's like showing a component in a loading state, fetch data from an API, and then show the component with the data. Only here it's not data you're "fetching", it's your own components 😇

Note: React.lazy and Suspense are not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, React team recommends Loadable Components.

I hope you guys enjoyed this post. This is my first contribution here, as I recently decided to challenge myself to start blogging. English isn't my main language (pardon my French...) and I don't claim to be an absolute React legend, so feel free to let me know if you disagree with anything here, or if you want to discuss some points further. As some wise man once said, explaining is the best way of learning and improving !

DEV Community: Yohann Legrand

Understanding equality of values in JavaScript (+ React useEffect dependencies)

1. Value types

1.1. Primitive values

1.2. Special types

2. Types of equality

3. Conclusion

4. Bonus: React hook dependencies

Manipulating arrays by use case

Intro

1. Populating

2. Transforming

3. Making assertions

4. Ordering

5. Searching

6. Arrays & Strings

🎁 Bonus: tips & tricks

Chaining

Spreading

Remove duplicates

Empty an array

Remove falsy values

New ES2021 JavaScript features (now available)

Logical Assignment Operators

1. Logical nullish assignment (??=)

2. Logical OR assignment (||=)

3. Logical AND assignment

Numeric separator

String.replaceAll

Promise.any

WeakRefs and Finalizers

(Part 1) Build quality forms with React 🚀

Controlled VS Uncontrolled

Controlled Form

Uncontrolled Form

Additional notes

react-hook-form + yup + TypeScript = ❤️

What is react-hook-form?

What is Yup?

Master the art of React.useEffect

React.useEffect, a lifecycle hook ?

Managing dependencies

Good practices

#1 - If you must define a function for your effect to call, then do it inside the effect callback, not outside.

#2 - Seperate concerns with multiple useEffect

#3 - Clean after yourself

Conclusion

Ever wonder what React does?

1. The imperative way

2. React APIs

3. JSX to the rescue

4. React Components

Conclusion

`console.log` like a pro

Output types

Formatting

Simple variables

Objects

Tabular data

Styling

Debugging

CodeSandbox & Github Magic

#1 Kickstart a sandbox

2 - Turn a GitHub repo into a sandbox

Bonus - VSCode in the browser (whaaat ?)

Lazy loading with React

Why you need lazy loading

Fake loading and lazy imports

How does this work in React?

React.lazy and Suspense

1. Logical nullish assignment (`??=`)

2. Logical OR assignment (`||=`)

`React.useEffect`, a lifecycle hook ?