Lesson 09 Pure Component

How to Create a Blur Component in React

1. Introduction to Pure Components:

   • Start by understanding the concept of pure components in React.
   • Pure components are components that only re-render when their props change, helping to optimize performance.

2. Create the Blur Component:

   • Navigate to the original website you are working on, which contains a blur component.
   • Identify the blur component and section blur on the website.
   • Create a new component called Blur in your project.
   • Define the JSX structure for the Blur component within a section element.

3. Implement the Blur Component:

   • Integrate the Blur component into your existing Movie List component.
   • Use the Blur component within the Movie List component by rendering it with a div element.
   • Adjust the positioning of the Blur component by setting its class to absolute and its positioning to top: 0 and right: 0.

4. Styling the Blur Component:

   • Add styling to the Blur component by setting its parent section to have a position of relative.
   • Create a blur background effect by adding a linear gradient to the section element.

5. Optimizing Component Rendering:

   • To prevent unnecessary re-rendering, convert the Blur component into a pure component using React's memo API.
   • Wrap the Blur component with the memo function to optimize its rendering based on prop changes.

6. Testing the Optimized Component:

   • Verify the optimization by checking the number of times the Blur component is rendered.
   • Console log the Blur component to observe that it is now rendered only once due to the memoization.

7. Finalizing the Blur Component:

   • Understand that the Blur component will now re-render only when necessary, improving the performance of the application.
   • Continue to focus on optimizing components and enhancing the functionality of the Blur component in future lessons.

By following these steps, you can successfully create a Blur component in React and optimize its rendering using pure components for improved performance.