Question 108546 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Duplicate React Components vs passing props and control behavior/logic

I come from old school html and .asp world and now learning wonderful react world. I am in process of building a small application using react, axios, redux etc. I am trying to simplify my question using below scenario –

Say, I have 4 components based on certain type which I render multiple times using .map() e.g. Math, History, Language, Arts. All these 4 components have modal forms and logic to show elements based on certain values.

Now, I wish to show these same 4 components in a read-only view that will not have link for modal forms etc.

My Question :

-> Should I just copy these 4 components and make 4 more without the form button?
or
-> Pass prop to these 4 components and add additional logic (in addition to existing that is heavy) to not show the form button?

Basically, are there any guidelines on when to stop passing props/objects/functions and just create separate instance. (4 components vs 8 components in above example)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    From Chat GPT. It seems like it depends and no strict guidelines.

    When deciding whether to create a new component in React or reuse an existing one by passing props, there are a few factors to consider.

    Firstly, think about the complexity and functionality of the component you are working with. If the component is relatively simple and only requires a few props to customize its behavior, it may be more efficient to reuse it and pass the necessary props. On the other hand, if the component is complex and has a lot of functionality, it may be more beneficial to create a new component to avoid cluttering the code with too many props.

    Secondly, consider the context in which the component is being used. If the same component is used in multiple places throughout the application and requires different behavior in each instance, it may be more practical to create a new component for each use case. This way, you can avoid passing unnecessary props and keep your code organized.

    Finally, think about the maintainability and scalability of your code. Creating more components can make your codebase easier to maintain and modify in the future, as each component has a clear purpose and can be updated independently of the rest of the code. However, creating too many components can also lead to a lot of boilerplate code, which can be difficult to manage.

    In summary, there is no one-size-fits-all answer to whether you should create more components in React or reuse by passing props. It depends on the specific requirements of your application, the complexity of the component, and the context in which it is used.


  2. 0

    In general terms:

    1. D.R.Y. = Do Not Repeat Yourself
    2. On my team, at a large American corporation, we limit passing props (aka prop drilling) to 3 layers of nested components.
    3. When there are more layers of nesting then destructuring the data you require from your state (ex. Redux) is the way to go.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search