React applications are organized into components. This lesson will show how components can be built up out of smaller components and then reused in new contexts.

React Components

  • Isolated pieces of a website or app
  • Can be passed data from parent components in the form of props
  • Can be rendered manually, or programatically
  • Return JSX
function Profile (props) {
  const [userData, setUserData] = useState(data) 

      <Activity />
      <Contact />

Using Components

  • Typically the index.js initiates the components tree from the top level
  • Can be made up of other components
  • Child components are rendered by their parents
  • Parents pass stateful data as props to children

Using Arrays of Components

  • Many components can be rendered at once
  • Wrap the components in an array
  • React will iterate over and render each
function ProfileList (props) {
        <Profile userId="One"/>,
        <Profile userId="Two"/>,
        <Profile userId="Three"/>

Building components with Iteration

  • Iteration and Loops can be used just like in plain JavaScript
  • Many components can be built based on collections of data
  • Components can be conditionally rendered
function Comment (props) {
  return (
      <p>User: {props.user}</p>
      <p>Comment: {props.content}</p>

function CommentList (props) {

  const comments = [
    { user: 'Joshua', content: 'Components are my fave!' },
    { user: 'Ada', content: 'Yes they make life easy' },
    { user: 'Alex', content: 'Loved them for years' }

  const commentComponents =, index) => {
    return <Comment user={ comment.user } content={ comment.content }/>

  return (
    <div className="comments">
      <h2>Comment List</h2>
        { commentComponents }

Immutable Components

  • Once components are rendered they cannot be updated
  • Re-rendering the component is how to update them
  • Re-renders are triggered when state or props change
function Tick(props) {
  [date, setDate] = useState(new Date().toLocaleTimeString())

  useEffect(() => {
    setTimeout(() => {
      setDate(new Date().toLocaleTimeString())
    }, 1000)

  return (
      <h1>Hello, world!</h1>
      <h2>It is {date}.</h2>

Ticking Clock Live

See the Pen React Clock Example by Joshua Burke (@Dangeranger) on CodePen.

Granular Render Updates

render performance

Component Lifecycle


  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()


  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()


  • componentWillUnmount()


  • componentDidCatch()

Lifecycle Methods Diagram