How better organize React-components interactions?
react project structure
react pages vs components
modularize react components
react naming conventions
react scalable folder structure
how to organize your react components
I am building SPA with React and have the following structure of UI-components:
- App (base layout with navbars and footers)
- EventsIndex (Load Events data from API)
- FilterBar (common components where current filter settings is shown)
- EventsTable (show Events data for desktop)
- EventsAccordion (show Events data for mobiles)
- EventsIndex (Load Events data from API)
EventsTable and EventsAccordion have a lot of common logic such as pagination, filter's and sorting's handlers.
I have to lift up handlers from child components(EventsTable and EventsAccordion) to parent EventsIndex. But for me it seems not the best way.
Am i wrong?
What the best practice in such cases?
Should i use Redux? If no, when it better to use it?
React is all about Components, I would say the most important part when starting to design a React App is structuring your Components well.
There are different ways to structure your components well, below are some:
Container Components: When designing your app identify the container components, these are the components which are going to hold state and also manipulate them based on events.
Coming to your question: I have to lift up handlers from child components(EventsTable and EventsAccordion) to parent EventsIndex. But for me, it seems not the best way. Should I use Redux?
Answer: When using container components only a few components are going to deal with the state and any child hierarchy ( Child Components ) are going to be stateless components / ( Functional Components ), so in order to update the state they will have to have handlers passed down by their Container Components, using which these components are going to update state. ( This is absolutely fine, that's the way it should be )
Coming to REDUX, using REDUX in such small scenario is not recommended, I would not recommend it, because it would be an overkill, REDUX is apt in a much complex scenario when you would like to share some state between two component trees, but still you could use REDUX but its just that, its not recommended.
HOC ( Higher Order Components ): Whenever you have some functionality which is reusable, consider creating a HOC
Please check : HOC
Break Components to Smaller Re-useable pieces: This is often very important whenever you see that a component contains code which is used elsewhere, go ahead and make it a Separate Component, thus making it Reusable.
Please check this, this has a bunch of best practices https://www.toptal.com/react/tips-and-practices
When to use REDUX ?
Basically, you need to be using REDUX, when keeping the state in a top-level root component is no longer sufficient, like for example : ( you have two branches out from root component, one of the child component in branch A wants to access some state in branch B's child, then you need to move it to the root component and again pass it down, such cases are apt for REDUX ).
Please check this source: https://redux.js.org/faq/general#when-should-i-use-redux
How to better organize your React applications?, A component can define nested components or services. It cannot use or define scenes. A scene can define nested components, scenes or I’ve been working on very large web applications for the past few years, starting from ground zero and, with a dozen other developers, making them scale up to now be used by millions of people.
You can follow a container type implementation - which means that if there is some common logic between components, they can be encapsulated within a component that acts as a container for these two components and provides the necessary common logic / data.
So, for example in your case it'll be something on the lines of
- EventsIndex (Load Events data from API) - FilterBar (common components where current filter settings is shown) - EventContainer (where common logic resides for both your components) - EventsTable (show Events data for desktop) - EventsAccordion (show Events data for mobiles)
EventContainer provides the common props such as pagination, filter's and sorting's handlers.
Hope this helps :)
How to Organize a Large React Application and Make It Scale , One of the best features of React is how it gets out of your way and is to Redux, and deal with user interaction; “dumb” components that are One of React best practices that helps to organize all your React components is the use of tools like Bit. These tools help to maintain and reuse code. Beyond that, it helps code to become discoverable, and promotes team collaboration in building components. Also, code can be synced across projects. 📚 13. Use snippet libraries
The best approach that we follow in a team setting (and is opinionated; and probably won't fit in everyone's scenario) is to break the app into logical structures.
- src - Utils (reusable methods such as sorting, pagination, etc) - UI (Reusable UI components such as buttons, modals, etc) - Services (API Calls to the database, further divided by entities /users /posts etc) - Components (Hierarchy of components) - EventsIndex (uses the service directory to make API calls) - EventsIndexContainer (if following container encapsulation pattern) - EventsTable - EventsAccordion
If the handler isn't component specific, I'd suggest move it to the utils folder (so that you have a single responsibility pattern as well as a single place to modify your logic rather than in two places) and pass down the handler to the table and accordion from the EventsIndex component or a EventsIndexContainer component that further encapsulates your logical components (the later one is preferred my many who I've worked with).
How to Organize Your React + Redux Codebase, It promoted segregating routes into components for better readability. Check React Router Docs for a better understanding. With the above A way to organize your code so it's easy to work with and maintain but not a burden to manage/stick to. Overall Project Structure We're just covering the UI components in this tutorial but I want to give an overall look at how my React Native projects are typically structured.
Best practices for building a large scale react application, The point is to observe the actions at each component or interactions of the user with the app's data. Wherever data is being modified, read or In this post, I will show how to create a simple reusable React component. I will also go through some of the best practices that I think can help build better reusable components in React. When writing reusable components, you can leverage powerful tools like Bit. It will help you easily share, organize and reuse components between apps and
Structuring React applications, One of the best features of React is that it doesn't force much It makes the hierarchy of components clear: any with a folder named after them "Organizing" things doesn't actually make your code better or make you more productive Co-locate the files that interact the most and you'll spend less time Writing Scalable React Apps with the Component Folder Pattern Discover how to organize your React components using the component folder pattern . It will help un-clutter your projects, and your life.
React Architecture Best Practices and Tips from Community Experts , This article explain React architecture best practices for building large react projects. Upon interacting with them, we figured out that a few of them didn't know what an Just beneath the user interface lies a tree of several React components. From using the best code quality standards to organizing the folder structure One thing we strive for is to have many small React components, rather than fewer, larger components. A good guide for when your component is getting too big is the size of the render function. If
- Thx, can u explain on example(s) in which cases i should use Redux?
- @nuT707 I have edited my answer, please check When to use REDUX
- Thx a lot! Good explaining and helpful links!
- Happy to help 😊