What is the best way to make sense of chains of logic across many files?

I’m working on React/Redux now and feel like I’d be leveling up if I could just keep better track of the logical flows from file to file. State passes as props from X to Y, callback function from here to there etc etc. It gets a bit hard to hold in mind and slows me down to a crawl more than I’d like.

Just curious if anyone else has thought through this issue and what you did about it. I’m considering a scaffold of sorts, a place to trace out the program logic at a low level. In the past flowcharts actually didn’t work out that well for low level logic but I think if I become more selective about what I trace, maybe it could work then.

I haven’t dealt with Redux yet, but have done all the React stuff. I haven’t done the multi file thing yet, but really it’s the same as the component to component issue.

I found a few things help:

Plan. Plan it all out. I make flowcharts if I need. Like the old adage goes, “Weeks of coding can save you hours of planning.” Plan out where the state data is going to get held and which components need access to which data. Plan out who needs to be a child of whom.

I don’t know if it’s the best way, but I tend to build my component architecture first. I build all the components and put a little text in there to make sure they’re all showing up. Then I pass the data. I have each stage output some test data to make sure the data is being passed correctly as props. Then (if needed) I check to make sure the data is being sent properly up to to the parent (callbacks/state). Then I add my logic.

To be honest, that last paragraph is kind of an idealized version. In reality, I may go through that on different sections of the code. But I think the core idea is to plan and test as you go.

I think that it’s the kind of thing that as you do it more and more, it will get easier and easier to keep track of it all and visualize it as you go.

1 Like