Why to use separate CSS files for components in React.js

yes, it is preferred to make every component with its stylesheet and also use CSS modules file to make it scoped. also separating your CSS file is for readability only and for you as a developer it has nothing to do with loading faster because your bundler will compress all CSS files into a single one to make it loaded faster. I hope My answer is clear and enough for your question.

Yes, you want separate files. No, the reason why you do it isn't for performance (although it certainly can have an impact on performance).

You're missing that components should be re-usable.

If I create an AwesomeWidget component and I want to drop it straight into another project I'm working on then I should be able to do that with as little friction as possible. And you can't do that if its styles are mixed in with application-specific stuff. Your components should be, insofar as is possible, independent of what's around them.

Keep the component-specific files separate and let Webpack do the work of wiring it all up for you. If you find yourself reusing a component enough then move it into its own repo (don't forget you can npm install from a git url if you don't want to publish it to the public package registry).