Component Principles

Component Principles

  • Keep it stupid
  • Keep it scoped

Keep it stupid

  • Solve one problem well
  • Functionally pure
  • Self-contained (No side-effects)
  • Handle basic html attributes (className)

Solve one problem well

  • Style is a problem
  • Behavior is a different problem
  • Different components should solve each
  • Composing them can be another problem

Functionally pure

  • Should return the same thing for a given set of props

Self-contained (No side-effects)

  • Don't modify things outside of itself
  • Side-effects are their own problem

Handle basic html attributes

  • If it's just an opinionated html element, it should accept all attributes that element could accept
const Button = ({ children, ...props }) => (
	<StyledButton {...props} >{ children }</StyledButton>
)

Keep it scoped

  • Styles itself, Positions its children
  • Props and hooks only
  • Encapsulate opinion. Then compose.

Styles itself, Positions its children

  • A child's style is its own problem to solve
  • A child's position is a problem for the parent to solve
.component {
  & > .component-part {
    margin: auto;
  }
}

Props and hooks only

  • Should be pure functions
    • Deterministic
    • No Side Effects​
  • ​Avoid globals
  • Avoid unconventional methods
    • useRef
    • React.children

Encapsulate opinion. Then compose.

const Contrived = () => {
	const foo = useFoo()
    const bar = usebar()
    
    return (
    	<div>
        	<h1>{foo}</h1>
            <button onClick={bar}>Submit</button>
        </div>
    )
}

Encapsulate opinion. Then compose.

const useContrivedData = () => {
	const foo = useFoo()
    const bar = usebar()
    
    return {
    	foo,
        bar,
    }
}

const _Contrived = ({ foo, bar = () => {} }) => (
  <div>
    <h1>{foo}</h1>
    <button onClick={bar}>Submit</button>
  </div>
)

const Contrived = () => {
	const data = useContrivedData()
    
    return </ {...data} _Contrived>
}
Made with Slides.com