Data Flow in React

Never underestimated how important it is when understanding the structure of your application BEFORE you start (I repeat *BEFORE* you start! (Can’t you tell where I had some issues?!)) writing a project from scratch. Also, with react, the importance of understanding where data should go and where it should flow to and from can not be understated.

DATA COLLECTION

Let’s start with gathering data. When gathering data, you want to make sure that you can get the data, whether it is from an api or a local json or any other data source. Doing this will allow you to see what type of data you are working with and the format of that data. With this information you are able to get a good understanding of what it will require in order to access that data.

COMPONENTS

When you are looking at your project, look at what you want to do with your project and in what order you want these things to be done. This is very important not to skip because it may cause you, down the line, to get confused as to the hierarchy of your application and where your data should go. You should ask yourself several questions. What component should I have at the top? What component needs to be the parent and the child? Do I want my data to flow just one way (Parent -> Child) or both ways (Parent <-> Child)? With these questions answered, you can think about the next step!

PROPS AND STATE

These concepts or very powerful if you are able to understand them. State is used if you want information to change. For example, user inputs can change from time to time so it is best to place that data in state. If you have data that will not change such as, data made from a calculation in some scenarios, pass that data as a prop to one of your components!

Make it a priority at the beginning of your project to look at all these aspects of your React application. Spend time on them because skipping time to plan at the beginning can cause your debugging time to be a multiple of your planning time!