Top Tips & Tricks of React JS To make you better Developer

Introduction

Alright folks, it is time for another article providing with you some knowledge you can immediately use to improve your React game to help you become better React devs, write better code or excel at coding interviews.

1. Use React Hooks In Functional Components

Hooks have been introduced with React v16.8 and are a huge boost for functional programming within React. With hooks, you can and should now make use of functional components instead of class components. But wait...functional components and state? And what's with lifecycle methods?

Have no fear - React Hooks have that covered for you. Let's see some examples:

class myComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
};
}
onChange = event => {
this.setState({ value: event.target.value });
};
render() {
return (

This is a random class component

value={this.state.value}
type="text"
onChange={this.onChange}
/>

{this.state.value}

);
}
}

This was the traditional way using a class. But with hooks we can now do it like this using the useState Hook:

Looks simpler? It is! We are using the useState Hook to set the initial state to an empty String ('') and it returns an array with the current state(value) and a method to mutate that state(setValue). We are also using array destructuring to get access to [value, setValue].

Functional components don't have access to lifecycle methods by default. But now we got hooks and the useEffect Hook comes to our rescue. First the traditional way using a class:

class myComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: localStorage.getItem('someRandomValue') || '',
};
}
componentDidUpdate() {
localStorage.setItem('someRandomValue', this.state.value);
}
onChange = event => {
this.setState({ value: event.target.value });
};
render() {
return (

Just some random class component!

value={this.state.value}
type="text"
onChange={this.onChange}
/>

{this.state.value}

);
}
}

And here is the same example making use of the useEffect Hook:

const myComponent = () => {
const [value, setValue] = React.useState(
localStorage.getItem('someRandomValue') || '',
);
React.useEffect(() => {
localStorage.setItem('someRandomValue', value);
}, [value]);
const onChange = event => setValue(event.target.value);
return (

Some random functional component with state and side Effects!

{value}

);
};

How awesome is that? useEffect will aways run when one of the values in the passed array [value] changes.

These are just two examples of using React Hooks. There are more out there and you can even create you own custom hooks. Every ReactJS Dev should learn this concept in my opinion!