Stop Coding before thinking Feat- HOC and Hooks Patterns Frontend System Design, Pt — 2

<blockquote> <p>Coding is not just about making things work; it&rsquo;s about crafting solutions that stand the test of time and scale gracefully into the future</p> </blockquote> <p>In the previous Blog, we talked about Render props and compound patterns in React, We are going to discuss more patterns to make our code ( life ) easy :)</p> <h1>HOC Pattern</h1> <p>In React, the Higher Order Component (HOC) pattern is a design pattern used for&nbsp;<strong>reusing component logic</strong>. It&rsquo;s not a built-in feature of React but rather a technique that utilizes the&nbsp;<strong>composability</strong>&nbsp;of React components.</p> <blockquote> <p>But Manish what is HOC in the first place?</p> </blockquote> <p>A Higher Order Component is a&nbsp;<strong>function that takes a component</strong>&nbsp;<strong>and returns a new component with enhanced functionality.</strong>&nbsp;It is essentially a wrapper component that adds props or behavior to the original component.</p> <blockquote> <p>Ok seems Good but why hoc ?</p> </blockquote> <p>HOCs are used to&nbsp;<strong>abstract and share logic between components</strong>, making your code more&nbsp;<strong>modular and reusable</strong>. They are particularly helpful when you have multiple components that need to&nbsp;<strong>share similar functionality</strong>, like authentication, data fetching, or state management.</p> <blockquote> <p>We will be taking a use case where we want to calculate the number of times a user clicked a button</p> </blockquote> <p>Here&rsquo;s the Codesand box link you can play with it as you like :)</p> <p><a href="https://medium.com/@manish.bt/stop-coding-before-thinking-feat-hoc-and-hooks-patterns-frontend-system-design-pt-2-776a9c97e260">Read More</a></p>