Hey guys, to become an exceptional coder, one needs to be constantly learning and staying up-to-date with the latest trends, tools, and technology. Always remember there are skills you can learn within a few hours, and some within a few months, while others take one step at a time and, if possible, a lifetime.

Here is a piece that will help you improve your React games, write better code, become a better React developer, and excel at coding interviews. Every tip is highly relevant and in demand, and if you learn even one of them, you’ll catapult yourself to the cutting edge of React development.

Let’s shoot..!

Use React With TypeScript

TypeScript is a typed superset of JavaScript that can help you catch errors early and make your code more maintainable. It also makes it easier to refactor code. It is one hot skill that has been trending in the frontend space recently and one of the developers’ top choices for learning in the near future.

Learning Typescript is a game-changer with profound productivity effects for your React applications. The create-react app now comes with built-in support for typescript.

To start a new Create React App project with TypeScript, you can run:

npx create-react-app my-app

or

yarn create react-app my-app --template typescript

The advantages of using typescript with React include type safety, faster development time, future-proof code, improved code readability, and improved scalability. Below is a simple example of using TypeScript in a functional React component:

import * as React from 'react';

interface Props {
text: string;
}

const MyComponent: React.FC<Props> = ({ text }) => {
return (
<div>
{text}
</div>
);
};

export default MyComponent;

Give TypeScript a try if you want to learn something new in 2023!

Use React Fragments

React fragments allow you to group a list of children without adding extra nodes to the DOM. This can be useful when you need to render a list of items without adding extra markup. Use fragments all the time to tidy up the DOM and improve readability.

Below is a simple example of using a react fragment in a functional React component:

const MyComponent = () => {
 return (
 <React.Fragment>
 <h1>My React Component</h1>
 <p>This is an example of using React Fragment in a functional component.</p>
 </React.Fragment>
 );
};

In this example, the react fragment is used to contain a heading and a paragraph without having to add any extra HTML elements.

Use React DevTools

React DevTools is a browser extension that allows you to inspect the component tree and view component state. It gives you all the information you need, including props, states, hooks, and everything in between, for every component, which makes debugging your application a breeze.

Use React Hooks

React hooks are a way to use state and side effects in functional components. They can be used to make components more readable and reusable. We can simply say they are functions that allow you to add extra features.

Also, developers can build their own custom hooks to serve a purpose, and some of the different inbuilt hooks are useState, useEffect, useContext, useReducer, and many others.

So let’s check out two of the inbuilt hooks, which are the useState and useEffect hooks, using different code samples:

useState Hook:

import React, { useState } from 'react';

function Example() {

const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

In this code sample, the useState hook is used to declare a new state variable, which is called “count”. This state variable is initially set to 0. The setCount function is used to update the value of the count state variable when the button is clicked. The value of the count state variable is displayed in the paragraph element.

useEffect Hook:

import React, { useEffect } from 'react';

const MyComponent = (props) => {

useEffect(() => {

document.title = ‘My Page Title’;
});

return (
<div>
<h1>My Component</h1>
</div>
);
};

export default MyComponent;

The useEffect hook in the code is used to perform side effects. In this example, it is used to set the title of the document to “My Page Title” when the component is rendered. This hook is useful for performing any task that needs to happen when the component is rendered, such as making API calls, setting up subscriptions, or updating the document title.

There are more out there, and I would advise every React developer to be familiar with this concept.

Use of PropTypes

PropTypes allow you to validate the props you pass to a component. Using PropTypes can help you catch errors early and make your code more maintainable. During development, React will log an error to inform you if any component is missing a necessary prop or receives the incorrect type for one of the props. To determine if the received data is valid or not, it exports a variety of validators.

Below is a simple example of using PropTypes in a functional React component:

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = (props) => {
const { value1, value2 } = props;
return <div>{value1} {value2}</div>;
};

MyComponent.propTypes = {
value1: PropTypes.string.isRequired,
value2: PropTypes.number,
};

MyComponent.defaultProps = {
value2: 0,
};

export default MyComponent;

In the example above, we are declaring that the component will receive a prop called value1 which is required and must be of type string, and a prop called value2 which is optional and must be of type number. We also provide a default value for value2 in case it is not provided. By doing this, we can catch any invalid props that are passed to the component and let the developer know what types of props are expected. https://kopetnews.id/

Use React Context

React context allows you to pass data and functions through the component tree without having to pass props manually. This can be useful when you need to access data or functions from multiple components.

Below is a simple example of using React Context in a functional React component:

import React from 'react';

export const AppContext = React.createContext();

import React, { useState } from ‘react’;
import { AppContext } from ‘./Context’;

export const Provide = ({ children }) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const contextValue = {
isAuthenticated,
setIsAuthenticated
};
return (
<AppContext.Provider value={contextValue}>
{children}
</AppContext.Provider>
);
};

import React from 'react';
import { Provide } from './Provide';
import { AppContext } from './Context';

export const App = () => {
return (
<Provide>
<AppContext.Consumer>
{contextValue => (
<div>
{contextValue.isAuthenticated ? ‘You are authenticated’ : ‘You are not authenticated’}
</div>
)}
</AppContext.Consumer>
</Provide>
);
};

In this example, the App component is wrapped in the <Provide> component, which provides the context value to the <AppContext.Consumer> component. The contextValue is then used to determine if the user is authenticated or not. This allows for a more efficient and cleaner way to share values between components.

Use Error Boundaries

These are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. By using Error Boundaries, developers can prevent crashes in their applications and provide better user experiences.

Error Boundaries are declared as classes that extend the base React component class and implement the componentDidCatch lifecycle method. This lifecycle method receives two parameters: an error and an info object. The error parameter contains the actual error that was thrown, while the info object contains information about the component that threw the error.

Below is an example of using Error Boundaries to catch errors:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) {
return { hasError: true };
}

componentDidCatch(error, info) {
logErrorToService(error, info);
}

render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}

return this.props.children;
}
}

export default ErrorBoundary;

The code above creates a class component called ErrorBoundary which extends the React.Component class. It then defines the getDerivedStateFromError(), componentDidCatch(), and render() methods. In the getDerivedStateFromError() method, the component sets the state.hasError property to true if an error is caught. The componentDidCatch() method is used to log any errors that are caught. Finally, the render() method returns either the component tree that crashed or a fallback UI if an error is caught.

NPM has a package that helps catch error boundaries in functional components. It even exposes a hook of its own to help with handling this issue. Click on https://github.com/bvaughn/react-error-boundary to learn more about the package.

Use Higher Order Components

Higher Order Components (HOCs) are functions that take a component as an argument and return a new component. They are a way of creating reusable code that can be applied to multiple components. HOCs are used to abstract common functionality or behavior into a component that can be shared across multiple components. Examples of HOCs include adding a state to a component, adding lifecycle methods to a component, or adding props to a component.

Let’s see how a HOC works in a React code:

const withFetchData = (WrappedComponent) => {
 return class extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 data: null,
 };
 }

componentDidMount() {
fetch(‘https://api.example.com/data’)
.then((response) => response.json())
.then((data) => {
this.setState({ data });
});
}

render() {
return <WrappedComponent data={this.state.data} {…this.props} />;
}
};
};

export default withFetchData;

The code sample creates a class that extends React.Component and uses the componentDidMount() lifecycle method to fetch data from an API. Once the data is fetched, it is stored in the state and passed to the wrapped component as a prop. The HOC also passes all the props of the original component to the wrapped component. The resulting component can then be used to access the fetched data in the wrapped component.

Use Conditionals in JSX

In JSX, conditionals are statements that let you render various components or elements based on specific circumstances. They let you develop interactive and dynamic elements that can alter or update in response to user input and other elements.

They are frequently used to render different components based on the state of the application, to show or conceal content based on a user’s authorization level, or to conditionally render components based on an authentication status.

Below are codes that describe how conditionals should be used in JSX:

Instead of using this

const MyComponent = () => {
 let output;
 if (someCondition) {
 output = <MyOtherComponent />;
 } else {
 output = null;
 }
 return (
 <div>
 {output}
 </div>
 )
}

use this

const MyComponent = () => {
return (
<div>
{someCondition && <MyOtherComponent />}
</div>
)
}

Use ES6 Syntax

ES6 syntax is the standard for writing React components. It makes your code more concise and easier to read. You should use ES6 syntax whenever possible when writing React components. This includes arrow functions, classes, the spread operator, template literals, let and const, and restructuring.

Some examples of ES6 syntax in React include:

const handleClick = () => {
 
};

class App extends React.Component {
 render() {
 return <h1>Hello World</h1>;
 }
}

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];

const name = 'John';
const greeting = `Hello ${name}`;

const person = {
 name: 'John',
 age: 20
};

const {name, age} = person;

Conclusion

This is where the journey ends, and I hope I was able to provide enough insights by providing tips and tricks to help you become a better developer. React is a powerful tool for web development, but it is perfect when you know a lot of tips that will help you improve and simplify your react skills.

Thanks so much for reading, if you have any comments or questions, don’t hesitate to drop them in the comment section.