React JS Fundamentals from My Point Of View

Reactjs, a JSX-based JavaScript UI library is the most popular JS library in the universe right now. Thousands of apps are built using React, it offers High performance, Smaller builds, Virtual DOM, Code reuse, UI based on Components, Runs on different platforms and Easy to learn. Let’s talk about some React Fundamental Concepts here.

React is a Library, not a framework: React is just a library and you need to make all decisions by yourself. It focuses on helping you to build user interfaces using components.

Components: React is designed around the concept of reusable components. All components small or big are independent and reusable, even across different projects. Components come in two types, Class components and Function components.

JSX: React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, however, following are some pros that come with it. It is type-safe, faster because it performs optimization while compiling code to JavaScript and faster to write templates, if you are familiar with HTML. Simple function components are great for simple needs, but sometimes we need more. React supports creating components through the JavaScript class syntax as well.

React Events: When handling events inside React elements, there are two very important differences from the way we do so with the DOM API. React events are named using camelCase, rather than lowercase and With JSX you pass a function as the event handler, rather than a string. React wraps the DOM event object with an object of its own to optimize the performance of events handling. But inside an event handler, we can still access all methods available on the DOM event object. React passes that wrapped event object to every handle call.

Props: Props are arguments passed into React components via HTML attributes. React Props are like function arguments in JavaScript and attributes in HTML. You can also pass data from one component to another, as parameters by using props.

State: The state property is a special one in any React class component. React monitors every component state for changes. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders. To change a value in the state object, use the setState() method.

Lifecycle Of Components/Hooks: Each component in React has a lifecycle which you can monitor and manipulate, they are called hooks. Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Manually changing the DOM in React components is the example effects, where we need hooks to manage the state easily.

Composition: Parent components that own the state are often referred to as container components. They are responsible for state management and rendering children. Child components are used to trigger event handlers passed down from parents and to display the data. Child components that are responsible for displaying the data are called presentational components.

Performance Optimization In React: During the initial rendering process, React builds a DOM tree of components. So, when data changes in the DOM tree, we want React to re-render only those components that were affected by the change, skipping the other components in the tree that were not affected. However, React could end up re-rendering all components in the DOM tree, even though not all are affected. This will result in longer loading time, wasted time, and even wasted CPU resources. We need to prevent this from happening.
React v16 was released with an additional API, a higher-order component called React.memo(). According to the documentation, this exists only as a performance optimization. Its name, “memo” comes from memorization, which is basically a form of optimization used mainly to speed up code by storing the results of expensive function calls and returning the stored result whenever the same expensive function is called again. When the component renders often or re-renders with same props, use React.memo() boosts the performance of a React app by avoiding re-rendering components whose props haven’t changed or when re-rendering is not needed.