Every React Developer Should Know The Fundamental Concepts Of React.js

Optimize performance of the React application:-

React is defined as a JavaScript library for building user interfaces. There are many ways to speed up your react application.

1. Use the Production Build-

If you’re facing performance problems in your React apps, make sure you’re testing with the minified production build. By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.

You can check it by installing React Developer Tools for Chrome. If you visit a site with React in production mode, the icon will have a dark background:

If you visit a site with React in development mode, the icon will have a red background:

2. useMemo( ) :-

This is a React hook that is used to cache functions in React, CPU-expensive functions.

Now see an example:

function App() {
const [count, setCount] = useState(0)

const expFunc = (count)=> {
waitSync(3000);
return count * 90;
} const resCount = useMemo(()=> {
return expFunc(count)
}, [count]) return (
<>
Count: {resCount}
<input type="text" onChange={(e)=> setCount(e.target.value)} placeholder="Set Count" />
</>
)
}

The expFunc results will be cached against the input when the same input occurs again useMemo will skip calling the expFunc and return the output cached against the input.

This will make the App component highly optimized.

3. Virtualize long lists:

If you render large lists of data, it is recommended that you render only a small portion of the datasets within the visible viewport of a browser, then the next data are rendered as the lists are scrolled called “windowing”. Awesome React libraries have been built for this, there is the react-window and react-virtualized by Brian Vaughn.

4. Avoid Reconciliation:

React compares the newly returned elements with the previously rendered ones by comparing a snapshot of a new object with the last updated object. This way React has to update only changed nodes in React DOM

This whole process is how to React updates DOM which is called Reconciliation.
This process is way faster than Real DOM manipulation.

Even though React is clever enough to update only changed nodes. But when props and state change, re-rendering takes place which takes some time.

So we need to avoid unnecessary re-rendering for such cases.

5. The Power Of Not Mutataing Data:

You should avoid object mutations and instead create a new object. The reason for this design pattern is because React will start by doing a shallow check to see if the snapshots of your state object are the same. Mutable data types like arrays and objects can be updated without creating new copies. As a result, React must traverse these structures comparing all the values to determine if a change has occurred.

The solution to this problem is to follow a more functional approach to setState ( ) updates. Strings and Numbers are non-issues as they are immutable, however, it can be tempting to update an array for example for just pushing a new value onto the end.

The following is the preferred way for updating arrays in React:

// Adding to end of array// Bad
this.state.arr.push('foo');// Good
this.setState({
arr: [...this.state.arr, 'foo']
})// Adding to middle of an array// Bad
this.state.arr[3] = 'foo';//Good
this.setState({
arr: this.state.arr.map((item, index) => index === 3 ? 'foo' : item)
})// Array deletion// Bad
this.state.arr.splice(2,1)// Good
this.setState({
arr: this.state.arr.filter((item, index) => index !== 2 )
})

5 things you need to know about React

If you are in the middle of learning it right now, you might be interested in reading this post.

1) It’s not a framework

Angular and other frameworks where some decisions are already made for you. React is just a library and you need to make all decisions by yourself. It helps you to build user interfaces.

It doesn’t help you with server communication, translations, routing, and so on. Some perceive this as a weakness. React is thin and it’s extremely easy to mix it with other 3rd party libraries.

2) JSX

If you looking at React examples you’ve seen JSX in action already. But React code can be written in plain js too.

const rootElement =
React.createElement(‘div’, {},
React.createElement(‘h1’, {style: {color: ‘red’}},
‘The world is yours’),
React.createElement(‘p’, {},
‘Say hello to my little friend’)
)
ReactDOM.render(rootElement, document.getElementById(‘app’))

The people at Facebook came up with JSX — a “syntactic sugar for the React.createElement(component, props, …children) function”.That’s why we can refactor the above example to this:

const RootElement = (
<div>
<h1 style={{color: red}}>The world is yours</h1>
<p>Say hello to my little friend</p>
</div>
)
ReactDOM.render(RootElement, document.getElementById('app'))

During the build process, Babel will transpile the markup to plain JS.

3) It’s declarative

In React you can use declarative style to write your components.

<select value={this.state.value} onChange={this.handleChange}>
{somearray.map(element => <option value={element.value}>
{element.text}
</option>)}
</select>

In this <select> example you are not using for loop to manually create a mapped collection. You are not saying what should be done just how it should look like.

4) You separate the concerns

In React you keep HTML, JS, and often CSS together as a component. You also split JS, HTML, and CSS into different files. “If you keep HTML and JS in separate files you can easily replace the HTML and keep the JS intact”. It doesn’t work that way if you think about it. Most changes to the HTML structure require refactoring of JS logic.

5) State

It’s needed to create a stateful component where the state is changing over time.

const InputBox = React.createClass({
getInitialState () {
return {
text: ''
}
},
changeText (event) {
this.setState({text: event.target.value})
},
render () {
return (
<div>
<input type='text' onChange={this.changeText}
placeholder='text' value={this.state.text} />
<span>{this.state.text}</span>
</div>
)
}
})

The state update will be scheduled and the component will re-render when it’s done. setState() call needs to be used to inform React about pending state change so it can apply the changes.

I'm a junior web developer. JavaScript is my favorite programming language. As a programmer, I love taking on challenges and love being part of the solution.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How does React traverse Fiber tree internally? — React source code walkthrough 15

//platform.twitter.com/widgets.js from Twitter https://twitter.com/MRCSEO

A Quick Start to Styled-Components

How to Create and Publish a Package to NPM Registry

RxJS forkJoin: Never use array indexes in subscribe!

Is DotVVM way forward for building complicated business apps?

Routing and Data Fetching in Next.js

Open road

HTML FORMS: Hang in there

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Asif Hasan Irfan

Asif Hasan Irfan

I'm a junior web developer. JavaScript is my favorite programming language. As a programmer, I love taking on challenges and love being part of the solution.

More from Medium

My First React Project

Most Efficient Ways Of Styling React Components: Styled Components & Media Queries

How To Create React App

Using Axios in ReactJS