Next.js Discord

Discord Forum

Component/Hook Design Pattern

Unanswered
Mugger Crocodile posted this in #help-forum
Open in Discord
Mugger CrocodileOP
say I have a component called Products.tsx that does all these:
useEffect(()=>{
 -- fetch data, etc
},[])


const getProductList = () =>{
   -do a query
}

const deleteProductItem = () =>{
 - do a mutation
}

and then below all that we have the jsx
return(<div></div>)


Now my scenario is, I want to reuse this component Products.tsx but with a different UI/design. The overall functionality are the same, even the data.

How would I go on about this if let's say I need to reuse this component in 5 different pages and the difference would only be on the design/UI?

4 Replies

Anay-208
you can add a className(if tailwindcss)/style property in props
and use tailwind-merge to merge it
Personally, I'd create clsx function and use that for it after getting the data from props
Burmese
I would suggest creating a reusable hook to store the useEffect and your other 2 functions. You can then reuse the hook wherever your UI is. Here's a quick draft I created to demonstrate what I mean - https://codesandbox.io/p/sandbox/component-hook-design-pattern-fynvks?file=%2Fsrc%2FApp.tsx%3A1%2C1-39%2C1