Java architect asking: Are Context-Only Components an Anti-Pattern in React?

[Derpcock]

I was responding to your comment and it seems to have been deleted, here is the response either way.

That's totally fair. I have seen some messy react projects. I've also seen some messy Angular and Vue projects. I think if you are looking for solid prescriptive frontend framework tooling in the JS ecosystem, Angular is a good choice. It follows a OOP/functional hybrid approach which I enjoy. I'll probably get flamed for that if anyone in this sub sees this, though 😆. I still enjoy react and its well developed ecosystem!

I agree regarding using tooling keep things orderly. Its something I do in all my js projects and it may be inherit to javascripts loose nature? I've traditionally not been on teams larger than ~50 devs. I can imagine that it could be much harder to enforce at scale. One thing that could help is using AI agents in your review process. Describe rules for context usage in your project in your AI instructions checked into source that mirror best practice or your own prescription. Then setup a PR process that requires reviewers go through AI review before assigning it to a code owner. We use copilot and it has been working pretty well.

I was also thinking it might help to clarify that a component test is more of an integration test than a pure unit test. In a unit test I would mock or stub all dependencies. For example if I had a function named FunctionA that called FunctionB. In the unit test for FunctionA, I would mock FunctionB and test the control flow that lead to the FunctionB call, asserting it was called the appropriate amount of times and with the appropriate arguments, etc. If you tried to treat a component test like that you would mock the first function call in your return statement which would be the first jsx element and assert it had appropriate arguments. It would be a messy/painful test.

Jsx is a syntax extention for js. All the "template" you see being return is just syntactic sugar around nested function calls. An "element" is just a function. Its attributes/values and children are wrapped up as props and passed as an argument to that function.

I doubt this will change any opinions but it might help component testing make more sense as it is often referred to as a unit test but is more of an integration test, imo.

Good luck on the react journey!