Skip to main content

Chapter 7 : React : On Another Level

7. Advanced React Patterns & Techniques​

a. Higher-Order Components (HOCs):​

HOCs are functions that take a component and return a new component with additional props or altered behavior.

Task: Create an HOC named withLoading that shows a loading spinner while the wrapped component's data is being fetched and then displays the component with its data once it's loaded.

b. Render Props:​

A technique where a component's children are a function that returns elements to render, allowing for code reuse.

Task: Design a MouseTracker component that tracks mouse movements and renders its content through a render prop, displaying the current x and y position of the mouse.

c. Compound Components:​

Components designed to be used together, where some components take on the role of "parent" and others "children".

Task: Construct a Tabs compound component system where you have a main Tabs component and a Tab child component. The child components should be aware of which tab is currently active.

d. React Portals:​

A way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Task: Build a modal dialog that, when opened, displays content in a modal overlay at the root level of the document, even if the modal component is deeply nested within other components.

e. Error Boundaries:​

Components that catch JavaScript errors in their child component tree and render fallback UI.

Task: Implement an error boundary component that catches any rendering errors in its children and displays a friendly error message to the user.

f. React.lazy & Suspense:​

Used for component-level code-splitting.

Task: Split your app such that certain rarely used components (like modals or settings panels) are loaded lazily, showing a spinner while they're being loaded using Suspense.

g. Forwarding Refs:​

Allows passing down refs through components.

Task: Design a FocusableInput component that forwards its ref to the underlying input element, allowing parents to directly focus the input when needed.

h. Hooks Advanced Patterns:​

Beyond the basic hooks, there are ways to compose and abstract hooks logic.

Task: Implement a useDebounce hook that debounces values (commonly used for search input boxes to delay API calls until the user stops typing for a certain duration).

i. Testing with React:​

It's essential to know how to test your React components using tools like Jest and React Testing Library.

Task: Write unit tests for one of your previously built components, ensuring that it renders correctly, responds to user inputs, and fires off any necessary API calls.

j. Adavance Form in React:​

It's essential to validate a form with advance validation.

Task: Create a Form with these Fields.

  • 3 Input Field - FirstName , LastName , Email(valid email should allow)
  • 1 Text Field - Description
  • 1 Radio Field - Gender
  • 1 Calender - DOB
  • 3 Select Component (use only React-Select) - Country, State,
  • 1 Text Field for website link - Only Links were Allowed
  • 1 checkbox for hobbies - e.g Music, Dance , other

Project: Interactive Recipe Book:​

  • Overview: An application where users can browse, search, rate, comment on, and create their own recipes.

  • Features:

    1. User Authentication & Profiles: Use Render Props or HOCs to manage user authentication. Allow users to have profiles where they can save favorite recipes and their own creations.

    2. Recipe Feed: A main feed where users can browse recipes. Recipes should have a title, image, ingredients list, step-by-step instructions, and user ratings. Utilize Compound Components for the recipe display.

    3. Recipe Search & Filters: Implement a search bar with filters (by ingredients, cuisine, cooking time, etc.). Consider creating a useDebounce hook to delay the search until the user stops typing for a short period.

    4. Detailed Recipe View: When a recipe is clicked, show a detailed view with comments from users. Use React Portals for modals that show the recipe in detail.

    5. Create & Edit Recipes: A drag-and-drop interface where users can dynamically add ingredient fields or steps, leveraging Refs to manage focus between these dynamic fields.

    6. User Comments & Ratings: Allow users to rate (1-5 stars) and comment on recipes. Use React.lazy & Suspense to load comments only when the user chooses to view them.

    7. Error Handling: Implement Error Boundaries around various parts of your app to ensure a graceful user experience even when something goes wrong.

    8. Favorites & User Personalizations: Allow users to favorite recipes and curate a personalized recipe feed based on their preferences and behaviors. This could be an area where Context API and Hooks play a significant role in managing user state and preferences throughout the app.

  • Bonus Features:

    1. Ingredient Calculator: Based on the number of servings, dynamically calculate ingredient quantities.

    2. Recipe Recommendations: Based on the recipes a user views or favorites, recommend other similar recipes.

    3. Integration with External Services: Allow users to export shopping lists to popular note apps or grocery delivery services.

This project aims to encompass various facets of a modern web application and challenges you to integrate multiple advanced React concepts. Once completed, it can serve as a comprehensive portfolio piece demonstrating your capabilities in React development.

Engaging with these tasks will give learners a rounded and deep understanding of advanced React patterns and techniques, ensuring they're well-prepared to tackle complex real-world React applications.