DEV Community: Chris1993

🔥Top 11 Mistakes to Avoid When Using React In 2022

Chris1993 — Mon, 15 Aug 2022 12:01:00 +0000

As React becomes more and more popular, more and more React developers have encountered various problems in the development process.

In this article, based on my actual work experience, I will summarize some common mistakes in 11 React development to help you avoid some mistakes.

If you are just starting to use React, it is recommended that you take a good look at this article. If you have already used React to develop projects, it is also recommended that you check and fill in the gaps.

After reading this article, you will learn how to avoid these 11 React mistakes:

When rendering the list, do not use the key
Modify the state value directly by assignment
Bind the state value directly to the value property of the input
Use state directly after executing setState
Infinite loop when using useState + useEffect
Forgetting to clean up side effects in useEffect
Incorrect use of boolean operators
The component parameter type is not defined
Passing Strings as Values to Components
There is no component name that starts with a capital letter
Incorrect event binding for element

1. When rendering the list, do not use the key

Problem

When we first learned React, we would render a list according to the method described in the documentation, for example:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);

After rendering, the console will prompt a warning ⚠️ a key should be provided for list items.

Solutions

You just need to follow the prompts and add the key attribute to each item:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number, index) => <li key={index}>{number}</li>);

key helps React identify which elements have changed, such as been added or removed. So we need to set a unique key value for each element in the array.

Documentation

React - Basic List Component

2. Modify the state value directly by assignment

Problem

In React, state cannot be directly assigned and modified, otherwise it will cause problems that are difficult to fix. Example:

updateState = () => {
  this.state.name = "Chris1993";
};

At this point, the editor will prompt a warning ⚠️:

Do not mutate state directly. Use setState().

Solutions

Class components can be modified with the setState() method, and function components can be modified with useState():

// ClassComponent：use setState()
this.setState({ name: "Chris1993" });

// FunctionConponent：use useState()
const [name, setName] = useState("");
setName("Chris1993");

Documentation

React - State and Lifecycle
React - Using the State Hook

3. Bind the state value directly to the value property of the input

Problem

When we directly bind the value of state as a parameter to the value property of the input tag, we will find that no matter what we enter in the input box, the content of the input box will not change.

export default function App() {
  const [count, setCount] = useState(0);
  return <input type="text" value={count} />;
}

This is because we use the state variable with state as the default value to assign to the value of <input>, and the state in the functional component can only be modified by the set method returned by useState . So the solution is also very simple, just use the set method when modifying.

Solutions

Just bind an onChange event to <input>, and modify it by calling setCount:

export default function App() {
  const [count, setCount] = useState(0);
  const change = (val) => setCount(val.value);
  return <input type="text" value={count} onChange={change} />;
}

4. Use state directly after executing setState

Problem

When we modify the data through setState() and get the new data immediately, there will be a situation where the data is still the old data:

// init state data
this.state = { name: "Chris1993" };

// update state data
this.setState({ name: "Hello Chris1993!" });
console.log(this.state.name); // output: Chris1993

We might think that the this.state.name entered at this point should be Hello Chris1993!, but it turns out to be Chris1993.

This is because setState() is asynchronous. When setState() is executed, the real update operation will be placed in the asynchronous queue for execution, and the code to be executed next (ie console.log this line) is executed synchronously, so the state printed out is not the latest value.

Solutions

Just encapsulate the subsequent operation to be performed as a function as the second parameter of setState(), this callback function will be executed after the update is completed.

this.setState({ name: "Hello Chris1993!" }, () => {
  console.log(this.state.name); // output: Hello Chris1993!
});

The correct content is now output.

5. Infinite loop when using useState + useEffect

Problem

When we directly call the set*() method returned by useState() in useEffect(), and do not set the second parameter of useEffect(), we will find an infinite loop:

export default function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1);
  });
  return <div className="App">{count}</div>;
}

At this time, you can see that the data on the page has been increasing, and useEffect() has been called infinitely, entering an infinite loop state.

Solutions

This is a common problem of using useEffect() incorrectly. useEffect() can be regarded as a combination of the three lifecycle functions componentDidMount, componentDidUpdate and componentWillUnmount in class components.
useEffect(effect, deps) takes 2 arguments:

effect side effect function;
deps array of dependencies.

When the deps array changes, the side effect function effect is executed.
To modify the method, you only need to pass [] in the second parameter of useEffect():

export default function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1);
  }, []);
  return <div className="App">{count}</div>;
}

To summarize the 4 cases where useEffect is used:

Do not set the second parameter: When any state is updated, the side effect function of useEffect will be triggered.

useEffect(() => {
  setCount(count + 1);
});

The second parameter is an empty array: The side effect function of useEffect is only triggered on mount and unmount.

useEffect(() => {
  setCount(count + 1);
}, []);

**The second parameter is a single-valued array: **The side-effect function of useEffect will be triggered only when the value changes.

useEffect(() => {
  setCount(count + 1);
}, [name]);

**The second parameter is a multi-valued array: **The side effect function of useEffect will only be triggered when the passed value changes.

useEffect(() => {
  setCount(count + 1);
}, [name, age]);

6. Forgetting to clean up side effects in useEffect

Problem

In class components, we use the componentWillUnmount() lifecycle method to clean up some side effects, such as timers, event listeners, etc.

Solutions

A return function can be set for the side effect function of useEffect(), which is similar to the role of the componentWillUnmount() lifecycle method:

useEffect(() => {
  // Other Code
  return () => clearInterval(id);
}, [name, age]);

Documentation

React - Example Using Hooks

7. Incorrect use of boolean operators

Problem

In JSX/TSX syntax, we often use boolean values to control rendered elements, and in many cases we use the && operator to handle this logic:

const count = 0;
const Comp = () => count && <h1>Chris1993</h1>;

We thought that the page displayed empty content at this time, but it actually displayed the content of 0 on it.

Solutions

The reason is because the falsy expression causes elements after && to be skipped, but returns the value of the falsy expression. So we try to write the judgment condition as complete as possible, without relying on the true and false of JavaScript's boolean value to compare:

const count = 0;
const Comp = () => count > 0 && <h1>Chris1993</h1>;

The page will display empty content.

Documentation

React - Inline If with Logical && Operator

8. The component parameter type is not defined

Problem

It is common for team development. If the components developed by each person do not have well-defined parameter types, it is easy for cooperating colleagues to not know how to use the components, which is very troublesome, such as:

const UserInfo = (props) => {
  return (
    <div>
      {props.name} : {props.age}
    </div>
  );
};

Solutions

Solutions are

Using TypeScript, define component props types;

// ClassComponent
interface AppProps {
  value: string;
}
interface AppState {
  count: number;
}

class App extends React.Component<AppProps, AppStore> {
  // ...
}

// FunctionComponent
interface AppProps {
  value?: string;
}
const App: React.FC<AppProps> = ({ value = "", children }) => {
  //...
};

Without using TypeScript, props types can be defined using propTypes;

const UserInfo = (props) => {
  return (
    <div>
      {props.name} : {props.age}
    </div>
  );
};

UserInfo.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

9. Passing Strings as Values to Components

Problem

Since React also has a template syntax, which is very similar to HTML, it often happens that numbers are passed directly to components as props, resulting in an unexpected value judgment:

<MyComp count="99"></MyComp>

Passing props.count === 99 in the MyComp component will return false.

Solutions

The correct way should be to use curly brackets to pass parameters:

<MyComp count={99}></MyComp>

10. There is no component name that starts with a capital letter

Problem

Developers just starting out often forget to start with a capital letter for their component names. Components starting with a lowercase letter in JSX/TSX are compiled into HTML elements, such as <div /> for HTML tags.

class myComponent extends React.component {}

Solutions

Just change the first letter to uppercase:

class MyComponent extends React.component {}

Documentation

React - Rendering a Component

11. Incorrect event binding for element

Problem

import { Component } from "react";

export default class HelloComponent extends Component {
  constructor() {
    super();
    this.state = {
      name: "Chris1993",
    };
  }

  update() {
    this.setState({ name: "Hello Chris1993!" });
  }
  render() {
    return (
      <div>
        <button onClick={this.update}>update</button>
      </div>
    );
  }
}

When clicking the update button, the console will report an error:

Cannot read properties of undefined (reading 'setState')

Solutions

This is because this points to the problem and there are several solutions:

bind in the constructor

constructor() {
  super();
  this.state = {
    name: "Chris1993"
  };
  this.update = this.update.bind(this);
}

Use arrow functions

update = () => {
  this.setState({ name: "Hello Chris1993!" });
};

Bind in the render function (not recommended, create a new function every time the component renders, affecting performance)

<button onClick={this.update.bind(this)}>update</button>

Use arrow functions in the render function (not recommended, create a new function every time the component renders, affecting performance)

<button onClick={() => this.update()}>update</button>

Documentation

React - How do I pass an event handler (like onClick) to a component?

If you think this article is good, please like, comment and follow, your support is the biggest motivation for me to share.

https://medium.com/@Chris1993

6 VSCode Extensions Necessary for Vue3 Development🔥

Chris1993 — Tue, 09 Aug 2022 13:54:00 +0000

Today, I will share 6 VSCode extensions necessary for Vue3 development, which can be installed and used directly through the VSCode extension center.

If you find it helpful, please like and support it~

1. Volar

🔥 1.53 million downloads+

I believe that students who use VSCode to develop Vue2 must be familiar with the Vetur extension. As a VSCode extension supporting Vue2, its main function is to provide highlighting, syntax support and syntax detection for Vue single-file components.

With the release of the official version of Vue3, the Vue team officially recommends the Volar extension to replace the Vetur extension, which not only supports Vue3 language highlighting, syntax detection, Also supports TypeScript and type checking based on vue-tsc.

Note when using:

First, disable the Vetur extension to avoid conflicts;
It is recommended to use css/less/scss as the language for <style>, because these are based on vscode-css-language the service provides reliable language support;
If using postcss/stylus/sass, additional syntax highlighting extensions need to be installed. postcss uses language-postcss, stylus uses language-stylus extension, sass uses Sass extension;
Volar does not contain ESLint and Prettier, while the official ESLint and Prettier extension supports Vue, so you need to install it yourself.

2. Vue VSCode Snippets

🔥 1.52 million downloads+

Vue VSCode Snippets extension aims to provide developers with the easiest and fastest way to generate Vue code snippets, through various shortcuts key to quickly generate various code snippets in .vue files. It is simply a must-have artifact for Vue3 development.

This extension supports: Volar, Vue2 and Vue3.

It is used as follows:

Create a .vue file and enter vbase to prompt the generated template content:

Type vfor to quickly generate a v-for command template:

Type v3onmounted to quickly generate the onMounted lifecycle function:

Others will not be demonstrated anymore. The functions are too powerful, and there are many commonly used shortcut keys. For details, you can check the document.

3. Auto Close Tag

🔥 7.69 million downloads+

The Auto Close Tag extension is a great VS Code extension that has a big impact on productivity. As the name suggests, when we type the closing bracket in the closing tag, it will add the closing tag. It supports HTML, Handlebars, XML, PHP, Vue, JavaScript, Typescript, JSX and more.

4. Vue Peek

🔥 490k+ downloads

Vue Peek Extension is used to expand the Vue code editing experience, allowing us to quickly jump to the files defined by components and modules.

It is used as follows:

Right-click the component label to jump to the component definition file:

Right-click the component label, and a pop-up window displays the file defined by the component:

5. Vue Theme

🔥 340k downloads+

Vue Theme extension provides a good Vue theme, and also supports configuring different colors, which feels pretty good.

6. Vite

🔥 89k+ downloads

The Vite extension allows us to automatically start the development server after opening the project, allowing developers to preview and debug the application without leaving the editor . Support one-click to start, build and restart projects.

Summarize

The 6 extensions shared today can be installed and used as needed.

I highly recommend Practical Volar and Vue VSCode Snippets These 2 extensions.
If you think it's good, please like and support. 👍

If you have a better extension, welcome to comment and share~🔥

✨follow me：https://medium.com/@Chris1993

3 Useful Node.js Version Managers

Chris1993 — Sun, 07 Aug 2022 15:30:00 +0000

Article review: <How to select the Node.js Version>

When our local development environment needs to install Node.js 8.0.0 and Node.js 17.0.0 at the same time, how to do it?

Next, I will share 3 tools for managing the Node.js version of the local environment.

1. nvm

⭐ Github stars: 60K+

nvm allows you to quickly install and use different versions of node via the command line.

(Image from: github)

nvm can only be used in projects for macOS and Linux users. If you are Windows users, you can use nvm-windows, nodist or nvs.

Installation

macOS download method:

# Method 1 Browser open the following link to download
https://github.com/nvm-sh/nvm/blob/v0.39.1/install.sh
# After the download is complete, install it through the command
sh install.sh

# Method 2 ✅
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# Method 3
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

If you encounter problems during the installation process, you can check the nvm supplementary notes.

Common commands

nvm ls # view version install all versions
nvm ls-remote # View all remote Node.js versions
nvm install 17.0.0 # Install the specified Node.js version
nvm use 17.0.0 # use the specified Node.js version
nvm alias default 17.0.0 # Set the default Node.js version
nvm alias dev 17.0.0 # Set the alias of the specified version, for example, set the alias of version 17.0.0 to dev

Example:

$ nvm use 16
Now using node v16.9.1 (npm v7.21.1)
$ node -v
v16.9.1
$ nvm use 14
Now using node v14.18.0 (npm v6.14.15)
$ node -v
v14.18.0
$ nvm install 12
Now using node v12.22.6 (npm v6.14.5)
$ node -v
v12.22.6

Simple as that!

2. n

⭐ Github stars: 16.7K+

n is an interactive Node.js version manager: no subshells, no profile setup, no convoluted API, just simple.

n is supported on macOS, Linux, including with Windows Subsystem for Linux, and various other unix-like systems. It is written as a BASH script but does not require you to use BASH as your command shell.

Installation

If you already have Node.js installed, an easy way to install n is using npm:

npm install n -g

Third Party Installers

Common commands

n # show all downloaded versions
n 10.16.0 # Download the specified version
n lts # View all LTS Node.js versions remotely
n run 10.16.0 # run the specified Node.js version

Use the n -h command to read help information, there are these main commands:

  n Display downloaded Node.js versions and install selection
  n latest Install the latest Node.js release (downloading if necessary)
  n lts Install the latest LTS Node.js release (downloading if necessary)
  n <version> Install Node.js <version> (downloading if necessary)
  n install <version> Install Node.js <version> (downloading if necessary)
  n run <version> [args ...] Execute downloaded Node.js <version> with [args ...]
  n which <version> Output path for downloaded node <version>
  n exec <vers> <cmd> [args...] Execute command with modified PATH, so downloaded node <version> and npm first
  n rm <version ...> Remove the given downloaded version(s)
  n prune Remove all downloaded versions except the installed version
  n --latest Output the latest Node.js version available
  n --lts Output the latest LTS Node.js version available
  n ls Output downloaded versions
  n ls-remote [version] Output matching versions available for download
  n uninstall Remove the installed Node.js

3. fnm

⭐ Github stars: 8.4K+

fnm: 🚀 Fast and simple Node.js version manager, built in Rust

(Image from: freecodecamp)

Features include:

🌎 Cross-platform support (macOS, Windows, Linux)

✨ Single file, easy installation, instant startup

🚀 Built with speed in mind

📂 Works with .node-version and .nvmrc files

Installation

macOS / Linux environment:

# bash, zsh and fish shells
curl -fsSL https://fnm.vercel.app/install | bash

Windows environment:

# Open the terminal in administrator mode. After installation, it can only be opened in administrator mode.

choco install fnm

# After the installation is complete, you need to manually set the environment variables

Linux/macOS/Windows environments can also directly download binary files for installation, download address: https://github.com/Schniz/fnm/releases

Common commands

fnm -h # View help
fnm install 17.0.0 # Install the specified Node.js version
fnm use 17.0.0 # use the specified Node.js version
fnm default 17.0.0 # Set the default Node.js version

If you have a better tool, please leave a message to share.

If this article helps you, please like and support it.👍

✨follow me： https://medium.com/@Chris1993

6 You Should Understand the ref and reactive Questions in Vue3✨🛀

Chris1993 — Wed, 03 Aug 2022 15:57:12 +0000

Vue3 provides developers with two APIs ref and reactive to implement responsive data, which are also the two APIs that we often use in Vue3 development projects.

This article introduces these two APIs from an introductory perspective. If there are errors, please discuss and learn together~

This article uses Vue3 setup syntax.

In the beginner stage, what we need to master is the "What", "How to use" and "Common problem" of these two APIs.

1. How to use reactive API?

The reactive method is used to create a reactive object. It takes an object/array parameter and returns a reactive copy of the object. When the property value of the object changes, it will automatically update the place where the object is used.

Test with object and array as parameters:

import { reactive } from 'vue'

let reactiveObj = reactive({ name : 'Chris1993' });
let setReactiveObj = () => {
  reactiveObj.name = 'Hello Chris1993';
}

let reactiveArr = reactive(['a', 'b', 'c', 'd']);
let setReactiveArr = () => {
  reactiveArr[1] = 'Hello Chris1993';
}

Template content:

<template>
  <h2>Vue3 reactive API Base</h2>
  <div>
    Object:{{reactiveObj.name}} 
    <span @click="setReactiveObj">Update</span>
  </div>
  <div>
    Array:{{reactiveArr}} 
    <span @click="setReactiveArr">Update</span>
  </div>
</template>

Contents of the page:

When we click the Update button respectively, we can see that after the data changes, the content on the view is also updated together:

2. How to use the ref API?

The function of ref is to convert a primitive data type (primitive data type) into a data type with responsive features. There are 7 primitive data types, namely: String/ Number / BigInt / Boolean / Symbol / Null / Undefined.

When the value of ref is read and modified in JS/TS, you need to use .value to get it, and when it is read in the template, you don't need to use .value.

Test with string and object as parameters:

import { ref } from 'vue'

let refValue = ref('Chris1993');
let setRefValue = () => {
  refValue.value = 'Hello Chris1993';
}
let refObj = ref({ name : 'Chris1993' });
let setRefObj = () => {
  refObj.value.name = 'Hello Chris1993';
}

Template content:

<template>
  <h2>Vue3 ref API Base</h2>
  <div>
    String:{{refValue}} 
    <span @click="setRefValue">Update</span>
  </div>
  <div>
    Object:{{refObj.name}}
    <span @click="setRefObj">Update</span>
  </div>
</template>

Contents of the page:

When we click the Update button respectively, we can see that after the data changes, the content on the view is also updated together:

3. Can reactive be used on deep objects or arrays?

The answer is yes, reactive is implemented based on ES2015 Proxy API, it The responsiveness is all nesting levels of the whole object.

Test with object and array as parameters:

import { reactive } from 'vue'

let reactiveDeepObj = reactive({
  user: {name : 'Chris1993'}
});
let setReactiveDeepObj = () => {
  reactiveDeepObj.user.name = 'Hello Chris1993';
}

let reactiveDeepArr = reactive(['a', ['a1', 'a2', 'a3'], 'c', 'd']);
let setReactiveDeepArr = () => {
  reactiveDeepArr[1][1] = 'Hello Chris1993';
}

Template content:

<template>
  <h2>Vue3 reactive deep API Base</h2>
  <div>
    Object:{{reactiveDeepObj.user.name}}
    <span @click="setReactiveDeepObj">Update</span>
  </div>
  <div>
    Array:{{reactiveDeepArr}}
    <span @click="setReactiveDeepArr">Update</span>
  </div>
</template>

Contents of the page:

When we click the Update button respectively, we can see that after the data changes, the content on the view is also updated together:

4. Is the reactive return value equal to the source object?

The answer is not equal because reactive is implemented based on ES2015 Proxy API , the return result is a proxy object.

Test code:

let reactiveSource = { name: 'Chris1993' };
let reactiveData = reactive(reactiveSource);

console.log(reactiveSource === reactiveData);
// false

console.log(reactiveSource);
// {name: 'Chris1993'}

console.log(reactiveData);
// Reactive<{name: 'Chris1993'}>

5. How does TypeScript write ref and reactive parameter types?

When using TypeScript to write ref / reactive parameter types, you can implement specific types according to the ref / reactive interface type:

function ref<T>(value: T): Ref<T>

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

Modify the previous example code:

import { ref } from 'vue'

let refValue = ref<string>('Chris1993');

let setRefValue = () => {
  refValue.value = 'Hello Chris1993'; // ok!
  refValue.value = 1993; // error!
}

let reactiveValue = reactive<{name: string}>({name: 'Chris1993'});

6. What about ref values as reactive parameters?

What happens when we already have a ref object and need to use it in a reactive object?

Suppose:

let name = ref('Chris1993');
let nameReactive = reactive({name})

We can also do this:

let name = ref('Chris1993');
let nameReactive = reactive({name})
console.log(name.value === nameReactive.name); // true

name.value = 'Hello Chris1993';
console.log(name.value);        // Hello Chris1993
console.log(nameReactive.name); // Hello Chris1993

nameReactive.name = 'Hi Chris1993';
console.log(name.value);        // Hi Chris1993
console.log(nameReactive.name); // Hi Chris1993

This is because reactive will unpack all deep refs and keep ref reactive.

When ref is assigned to a reactive property by assignment, ref is also automatically unpacked:

let name = ref('Chris1993');
let nameReactive = reactive({})
nameReactive.name = name;

console.log(name.value);        // Chris1993
console.log(nameReactive.name); // Chris1993
console.log(name.value === nameReactive.name); // true

7. Summary

This article mainly introduces the difference between the usage of reactive/ ref API from the perspective of getting started, as well as several problems in the use process.

To briefly summarize:

reactive is generally used for object/array type data, no need to use .value;
ref is generally used for data of basic data types. When reading and modifying in JS, you need to use .value, but not when using it in templates;
reactive can modify deep property values and remain responsive;
reactive return value is different from the source object;
reactive attribute value can be ref value;

The next article will share the mastery with you, and you are welcome to look forward to it.

6 Interesting JavaScript Questions You Should Know

Chris1993 — Tue, 02 Aug 2022 05:13:00 +0000

As the primary development language for front-end developers, JavaScript itself has a relatively simple syntax and a well-developed ecosystem, which is gaining more and more influence in the community.

In our development process using JavaScript, we often encounter all kinds of strange problems that make us feel headache.

I have compiled 6 common and interesting questions to share with you.

Inspiration comes from WTFJS.

1. A strange `try...catch`

❓ Problem

What does executing the following code return? 2 or 3?

(() => {
  try {
    return 2;
  } finally {
    return 3;
  }
})();

💡 Answer

The answer is 3. Why is that?

This is because in the try...catch...finally statements, the finally clause is executed whether or not an exception is thrown.

In addition, if an exception is thrown, the statement in the finally clause is executed even if there is no catch clause to handle the exception.

📚 Reference

MDN try...catch

2. `[]` and `null` are objects

❓ Problem

What does the next three lines of code return?

typeof [];
typeof null;

null instanceof Object;

💡 Answer

The result is:

typeof []; // -> 'object'
typeof null; // -> 'object'

null instanceof Object; // false

The typeof operator returns a string that must conform to Table 37: The typeof operator returns the value.

It returns the string 'object' for null, normal, standard specific, and nonstandard specific objects that do not implement [[Call]].

console.log(typeof 42);
// expected output: "number"

console.log(typeof '@Chris1993');
// expected output: "string"

console.log(typeof true);
// expected output: "boolean"

console.log(typeof undeclaredVariable);
// expected output: "undefined"

However, you can check the type of the object using the toString method.

Object.prototype.toString.call([]);
// -> '[object Array]'

Object.prototype.toString.call(new Date());
// -> '[object Date]'

Object.prototype.toString.call(null);
// -> '[object Null]'

📚 Reference

MDN typeof

3. The Arrow function expressions return undefined

❓ Problem

Why did the function f2 return undefined?

let f1 = () => '@Chris1993';
f1(); // -> '@Chris1993'

let f2 = () => {};
f2(); // -> undefined

💡 Answer

We thought we should return {}, but why did return undefined, in fact, because the arrow function returns {} is part of the Arrow function expressions syntax, we write a test case can see:

let f2 = () => {
    return '@Chris1993'
};
f2(); // -> '@Chris1993'

So the f2 function above returns undefined.

of course, if you want to return an {} object, you can just put {} it inside the parentheses:

let f2 = () => ({});
f2(); // -> {}

4. Can the function be executed using backquotes?

❓ Problem

Is there any other way to call a function other than the following?

function f(...args) {
  return args;
}

f(1, 2, 3); // -> [ 1, 2, 3 ]

Of course, we can use backquotes to call:

f`Hello string ${'@Chris1993'}, Hello boolean ${false}, Hello array ${[1, 2, 3]}`;
/*
[
    ["Hello string ",  ", Hello boolean ", ", Hello array ", ""],
    "@Chris1993",
    false,
    [1, 2, 3]
]
*/

💡 Answer

This looks amazing in appearance, but in fact, is template string. This is an advanced form of template string, a labeled template string.

In the example code above: the f function is the tag of a template literal, and the tag can be used to parse the template string. The first argument to the label function contains an array of string values. The remaining parameters are expression dependent.

📚 Reference

MDN Template Literals。

5. Tags in JavaScript?

❓ Problem

What does the following code execution output?

foo: {
  console.log("Hello");
  break foo;
  console.log("@Chris1993");
}

💡 Answer

The answer is yes, it returns the string Hello. Since foo is recognized as a label, then execute the following console.log("Hello"), and then execute break foo to break execution.

We often use labeled statements together with break and continue statements to end or continue a loop:

let str = '';

loop1:
for (let i = 0; i < 5; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

console.log(str);
// expected output: "0234"

📚 Reference

MDN label

6. `{}{}` is undefined

❓ Problem

Write them in the console. They will return the value defined in the last object.

{}{}; // -> undefined
{}{}{}; // -> undefined
{}{}{}{}; // -> undefined
{foo: 'bar'}{}; // -> 'bar'
{}{foo: 'bar'}; // -> 'bar'
{}{foo: 'bar'}{}; // -> 'bar'
{a: 'b'}{c:' d'}{}; // -> 'd'
{a: 'b', c: 'd'}{}; // > SyntaxError: Unexpected token ':'
({}{}); // > SyntaxError: Unexpected token '{'

💡 Answer

When inspecting each {}, they returns undefined. If you inspect {foo: 'bar'}{}, you will find {foo: 'bar'} is 'bar'.

There are two meanings for {}: an object or a block. For example, the {} in () => {} means block. So we need to use () => ({}) to return an object.

Let's use {foo: 'bar'} as a block. Write this snippet in your console:

if (true) {
  foo: "bar";
} // -> 'bar'

Surprisingly, it behaviors the same! You can guess here that {foo: 'bar'}{} is a block.👏

Welcome to follow me, I will share more useful content😄 ~

Happy coding! ❤️

What is the Version of Node.js?

Chris1993 — Sat, 30 Jul 2022 08:33:00 +0000

Node.js is a JavaScript runtime environment based on the Chrome V8 engine.

Nowadays, Node.js is used more and more, from server-side projects to development tool scripts, so it is necessary to have some basic knowledge of Node.js.

Today we will focus on the differences between LTS and Current in Node.js and how to choose the appropriate version.

1. What is the version of Node.js?

On the official website, you can see that Node.js has the LTS series and the Current series, which correspond to different latest versions.

(photo via Nodejs)

The naming of Node.js version numbers follows the "Semantic Versioning" rule, which specifies how versions are represented, how they are instrumentalized, how they are compared, and what different versions mean.

Given a version number MAJOR.MINOR.PATCH, increment the:

MAJOR version when you make incompatible API changes.
MINOR version when you add functionality in a backward compatible manner.
PATCH version when you make backward-compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

2. LTS Version

The full name of the LTS version is Long Time Support, which means Long Time Support. The core of the LTS version is to ensure stability and security. The large version number of each LTS version is even. Reduce unknown problems during development.

The LTS Version has a three-stage life cycle:

Active: Each even-numbered version that enters the LTS from Current is actively maintained and upgraded for 18 months.
Maintenance: After the active phase reaches 18 months, there is a 12-month maintenance phase during which only bug fixes and security patches are made.
End of Life: After the maintenance period expires, the version enters the EOL phase and will not be maintained. In other words, each LTS version will be maintained for a maximum of 30 months, after which it will not be maintained.

A version of the Life Cycle chart (2022–2025) :

(photo via Node. Js)

3. Current Version

Current means the latest release, which is intended for feature development and API perfection, with a shorter lifetime and more frequent code updates.
You can experience the latest features in this release, as well as all sorts of unexpected problems and compatibility issues.

In general, Current releases a major version every 6 months (most of the time) :

Release new Even versions every April;
Release new Odd versions every October;

(photo via : Node. Js releases)

Details version update records, you can view Node.js releases.

4. How to choose the right version?

Use the LTS version

It is usually used in a production environment to ensure stability. It is recommended to use the LTS version.

Use the Current version

Usually used for testing environments, if you want to try out new versions and features (such as new ECMAScript features), or be able to upgrade quickly and easily without disrupting the environment, it is recommended to use the Current version.

5. Conclusion

This article mainly introduces the differences between LTS and Current in Node.js and how to choose the appropriate version.

It is usually not necessary to update to the latest version. We can decide whether to upgrade according to the lowest Node.js version that the project technology stack depends on. If possible, it is recommended to upgrade at least the large version to the latest LTS version.

Error Handling in Vue3

Chris1993 — Mon, 25 Jul 2022 15:59:09 +0000

Hi, I'm Chris and I'm a front-end development engineer.

This is the first article I wrote and I hope it will be helpful.

When developing component libraries or plug-ins, global error handling is often required to achieve these goals:

Global unified handling of errors;
Prompt error messages for developers;
Program downgrade processing and so on.

How do you do that?

Next I will briefly implement an error handling method, and then introduce the implementation process of Vue3 source code.

The Vue3 version of this article is 3.0.11

1. Common error handling

There are many common errors, such as:

JS syntax errors;
Ajax request errors;
Static resource loading errors;
Promise errors;
iframe errors;
...

There are many other ways.

1.1 window.onerror

Whenever an error occurs while JS is running, the window.onerror() method is executed:



window.onerror = function(message, source, lineno, colno, error) {
  console.log('error message:', {message, source, lineno, colno, error});
}

If this function returns true, execution of the default event handler is prevented.

1.2 try...catch errors handling

You can also handle errors through try...catch:



try {
  // do something
} catch (error) {
  console.error(error);
}

I won't go into the details of other methods here.

1.3 Think

And if you think about it, Vue3 is also everywhere through try...catch to handle errors?

Let's see together.

2. Simple global error handling

When developing plug-ins or libraries, try...catch defines a global errors handling method that passes in the method to be executed as an argument. The user only cares about the result of the call, not the internal logic of the global errors handling method.

Such as:



const errorHandling = (fn, args) => {
  let result;
  try{
    result = args ? fn(...args) : fn();
  } catch (error){
    console.error(error)
  }
  return result;
}

Try to run:



const f1 = () => {
    console.log('[f1 running]')
    throw new Error('[f1 error!]')
}

errorHandling(f1);
/*
 output:
 [f1 running]
Error: [f1 error!]
    at f1 (/Users/Chris1993/www/a.js:14:11)
    at errorHandling (/Users/Chris1993/www/a.js:4:39)
    at Object.<anonymous> (/Users/Chris1993/www/a.js:17:1)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47
*/

When you need to handle an error, you simply pass this method as a parameter.

But this is too simple. In real business, we often encounter nested calls to methods. Let's try it:



const f1 = () => {
    console.log('[f1]')
    f2();
}

const f2 = () => {
    console.log('[f2]')
    f3();
}

const f3 = () => {
    console.log('[f3]')
    throw new Error('[f3 error!]')
}

errorHandling(f1)
/*
  output:
  [f1 running]
  [f2 running]
  [f3 running]
  Error: [f3 error!]
    at f3 (/Users/Chris1993/www/a.js:24:11)
    at f2 (/Users/Chris1993/www/a.js:19:5)
    at f1 (/Users/Chris1993/www/a.js:14:5)
    at errorHandling (/Users/Chris1993/www/a.js:4:39)
    at Object.<anonymous> (/Users/Chris1993/www/a.js:27:1)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
*/

Nested calls can also work this way. Then you need to implement different errors handling logic in the errorHandling method.

Next, let's see how it is handled in the Vue3 source code?

3. Error Handling in Vue3

Vue3 is implemented in three steps:

Step 1: Implement error handling methods

Implement two methods to handle global errors in the errorHandling.ts file:

callWithErrorHandling: Error handling synchronization method;
callWithAsyncErrorHandling: Error handling asynchronous methods;

Usage:



callWithAsyncErrorHandling(
  handler,
  instance,
  ErrorCodes.COMPONENT_EVENT_HANDLER,
  args
)

Source code implementation:



// packages/runtime-core/src/errorHandling.ts

// Error handling synchronization method
export function callWithErrorHandling(
  fn: Function,
  instance: ComponentInternalInstance | null,
  type: ErrorTypes,
  args?: unknown[]
) {
  let res
  try {
    res = args ? fn(...args) : fn(); // Call the original method
  } catch (err) {
    handleError(err, instance, type)
  }
  return res
}

// Error handling asynchronous methods
export function callWithAsyncErrorHandling(
  fn: Function | Function[],
  instance: ComponentInternalInstance | null,
  type: ErrorTypes,
  args?: unknown[]
): any[] {
  // ...
  const res = callWithErrorHandling(fn, instance, type, args)
  if (res && isPromise(res)) {
    res.catch(err => {
      handleError(err, instance, type)
    })
  }
  // ...
}

The callWithErrorHandling method is simpler, with a simple try...catch makes a layer of packaging.

And callWithAsyncErrorHandling method is more interesting, will need to deal with the target method as parameters to callWithErrorHandling, on his return to the Promise of object. The catch method handling errors.

Step 2: Handling errors

Next, implement the handleError() method:



// packages/runtime-core/src/errorHandling.ts

// Handling errors
export function handleError(
  err: unknown,
  instance: ComponentInternalInstance | null,
  type: ErrorTypes,
  throwInDev = true
) {
  // ...
  logError(err, type, contextVNode, throwInDev)
}

function logError(
  err: unknown,
  type: ErrorTypes,
  contextVNode: VNode | null,
  throwInDev = true
) {
  // ...
  console.error(err)
}

Here we simply implement the logError() method and print the error content directly through console.error(err).

Step 3: Implement Tree Shaking



// packages/runtime-core/src/errorHandling.ts

function logError(
  err: unknown,
  type: ErrorTypes,
  contextVNode: VNode | null,
  throwInDev = true
) {
  if (__DEV__) {
    // ...
  } else {
    console.error(err)
  }
}

When compiled into the production environment, the __DEV__ branch code is not packaged, optimizing package size.

I hope I can clear your questions in your minds, and it will benefit you. If you are like it, don’t forget to clap. Stay tuned! :)

DEV Community: Chris1993

🔥Top 11 Mistakes to Avoid When Using React In 2022

1. When rendering the list, do not use the key

Problem

Solutions

Documentation

2. Modify the state value directly by assignment

Problem

Solutions

Documentation

3. Bind the state value directly to the value property of the input

Problem

Solutions

4. Use state directly after executing setState

Problem

Solutions

5. Infinite loop when using useState + useEffect

Problem

Solutions

6. Forgetting to clean up side effects in useEffect

Problem

Solutions

Documentation

7. Incorrect use of boolean operators

Problem

Solutions

Documentation

8. The component parameter type is not defined

Problem

Solutions

9. Passing Strings as Values to Components

Problem

Solutions

10. There is no component name that starts with a capital letter

Problem

Solutions

Documentation

11. Incorrect event binding for element

Problem

Solutions

Documentation

6 VSCode Extensions Necessary for Vue3 Development🔥

1. Volar

2. Vue VSCode Snippets

3. Auto Close Tag

4. Vue Peek

5. Vue Theme

6. Vite

Summarize

3 Useful Node.js Version Managers

1. nvm

Installation

Common commands

2. n

Installation

Common commands

3. fnm

Installation

Common commands

6 You Should Understand the ref and reactive Questions in Vue3✨🛀

1. How to use reactive API?

2. How to use the ref API?

3. Can reactive be used on deep objects or arrays?

4. Is the reactive return value equal to the source object?

5. How does TypeScript write ref and reactive parameter types?

6. What about ref values as reactive parameters?

7. Summary

6 Interesting JavaScript Questions You Should Know

1. A strange try...catch

2. [] and null are objects

3. The Arrow function expressions return undefined

4. Can the function be executed using backquotes?

5. Tags in JavaScript?

6. {}{} is undefined

What is the Version of Node.js?

1. What is the version of Node.js?

2. LTS Version

3. Current Version

4. How to choose the right version?

5. Conclusion

1. A strange `try...catch`

2. `[]` and `null` are objects

6. `{}{}` is undefined