Good pratices for react functions

Question

I'm guessing, when my component start to grow big and has some complex logic in his functions, should I make a separated file for functions and handlers? Or its a better practice to maintain the component logic and render method in the same file?

Sorry if its not a good question, but this bother me. I hope to get some good tip. Thank you.

This may help you? https://stackoverflow.com/a/52225812/2138752 — Bhojendra Rauniyar, Jun 24 '19 at 18:36
You may benefit from redux methodology. It separates the logic from the component. It increases the structural complexity of the app, but reduces the file sizes. — Sterling Archer, Jun 24 '19 at 18:38
Thank you guys, I ll read all the content and posts that everybody mentioned here. — atom-100, Jun 24 '19 at 23:11

Bhojendra Rauniyar · Answer 1 · 2019-06-24T18:48:09.900

0

Rather than writing a complex component, define at most smallest part for the component. This way, you'll have only required hooks and methods. So that you'll have clear vision on your way.

For eg.

Bad

Face Component

Good

Eye Component
Mouth Component
Nose Component
Ear Component
... Component

You may also read the following docs:

And most importantly:

thinking in react

edited Jun 24 '19 at 18:48

answered Jun 24 '19 at 18:42

Bhojendra Rauniyar

83,432
35
168
231

score 0 · Answer 2 · answered Jun 24 '19 at 18:43

The React site provides a great overview about Thinking in React that walks you through the thought process of building a searchable product data table using React.

I suggest starting there then looking through the whole Main Concepts section.

Building a scalable, well architected application takes experience. Not something you can glean from one stackoverflow question. Best of luck!

Good pratices for react functions

2 Answers2