ReactJS ~Clean Code DRY~

Clean code is DRY
DRY is an acronym that stands for Don't Repeat Yourself. If you are doing the same thing in multiple places, consolidate the duplicate code. If you see patterns in your code, that is an indication that it is prime for DRYing. Sometimes this means standing back from the screen until you can't read the text and literally looking for patterns.

// Dirty
const MyComponent = () => (
  <div>
    <OtherComponent type="a" className="colorful" foo={123} bar={456} />
    <OtherComponent type="b" className="colorful" foo={123} bar={456} />    
  </div>
);

// Clean
const MyOtherComponent = ({ type }) => (
  <OtherComponent type={type} className="colorful" foo={123} bar={456} />
);
const MyComponent = () => (
  <div>
    <MyOtherComponent type="a" />
    <MyOtherComponent type="b" />
  </div>
);