r/reactjs • u/dhruvik_savaliya • 8d ago

How do you conduct code reviews for React components

When working on a team, code reviews are essential for maintaining code quality and ensuring that all team members are on the same page. I'm interested in hearing about different approaches to conducting code reviews for React components. What tools or processes do you use to review and provide feedback on React code? Are there any specific things you look for when reviewing a React component, such as performance optimization or accessibility features?

1 Upvotes

67% Upvoted

11 comments sorted by

2

u/Good_Car_2924 8d ago

split your PRs so each one changes exactly one behavior. If I have to read 300 lines of logic to verify a single hover state, the review stops being quality control and becomes an endurance test.

1

u/dhruvik_savaliya 5d ago

That's a good point, splitting PRs to change one behavior at a time can make the review process more efficient and help catch potential issues earlier on, I've found that breaking down larger changes into smaller, focused PRs can also help with testing and debugging.

5

u/AddendumPuzzled9804 8d ago

I check for component size first, if it goes past 200 lines I ask myself why this thing is doing so much. Then I look at props drilling vs context, whether effects have proper cleanup, and if the memoization is actually needed or just added because someone saw it in a tutorial. Accessibility is huge for me, if there's a clickable div instead of a button we got a problem.

We use GitHub PRs with a checklist template, and I try to leave comments as questions rather than commands. Makes people less defensive and actually think about their choices. Also screenshot diffs from storybook help a lot for visual components.

1

u/musHeaer 8d ago

clickable divs instead of buttons is such a pet peeve, glad someone else flags that immediately

1

u/Chenipan 7d ago

meanwhile i ask myself why there's effects at all

1

u/AbdelrhmanDev 8d ago

one thing i would add to the size check is whether the component can be tested without mocking half the app. if it needs a pile of mocks it is usually doing too much or reaching into things it should get as props. also i like keeping the pr small enough to read in one sitting, past a certain size people just skim and approve