HOW TO RENDER COMPONENTS IN REACT.JS ?
WHAT IS RENDERING?
Rendering in React refers to the process of displaying or rendering React components to the DOM (Document Object Model). It involves taking your React components, processing them, and updating the browser's display to reflect the current state of your application.
- Component Life Cycle.
- List and Keys.
- Render props.
- Refs v. Events.
- Higher order Components.
Component Life Cycle:
React components have a life cycle consisting of three phases: Mounting, Updating, and Unmounting. Each phase has specific lifecycle methods that are called at different points in the component's lifecycle.
List and Keys:
- LIST : When you have a dynamic set of data, such as an array of items, and you want to display each item in your React component, you use the map() function to iterate over the array and create a set of React elements. This is often referred to as "rendering a list."
- KEYS : When rendering a list of React elements, it's essential to assign a unique identifier, known as a "key", to each item in the list. Keys help React identify which items have changed, been added, or been removed. They assist in the efficient reconciliation process during updates.
RENDER PROPS :
The term render props refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
Refs:
In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.
Like, Share and Subscribe #DevTools99 for more useful videos, tools info and #tutorials . Thank you!
