Brad Westfall bradwestfall

## HoC-vs-RenderProps-vs-Hooks.md

      
              1 file
            
          
              3 forks
            
          
              6 comments
            
          
              25 stars
            
          
                bradwestfall
                / HoC-vs-RenderProps-vs-Hooks.md
            
            
              Last active
              April 14, 2024 15:54
            
              
                An explanation of why Hooks are a nicer way to abstract re-useable state and functionality vs HoC's and Render Props
              
          
    HoC (pattern) vs Render Props (pattern) vs Hooks (not pattern, a new API)

Someone was asking me about comparing the HoC and Render Props patterns (and their shortcomings) to hooks. I might leave this up as a public gist for others if it's helpful.

tldr;
Issues with HoC:

  
## todo.js
import React, { useState, useRef } from 'react'
import ReactDOM from 'react-dom'

/**
 * 1. Start by creating some state to store an array of items
 *    where you have the array holding objects as shown below
 * 2. Eventually, your array will start empty, but for now it might
 *    make sense to have that array already populated with an item
 *    or two so that way we can show them in the `<ul>`. So do that
 *    and then iterate over the `items` array in the JSX and make
	import React, { useState, useRef } from 'react'
	import ReactDOM from 'react-dom'

	/**
	* 1. Start by creating some state to store an array of items
	* where you have the array holding objects as shown below
	* 2. Eventually, your array will start empty, but for now it might
	* make sense to have that array already populated with an item
	* or two so that way we can show them in the `<ul>`. So do that
	* and then iterate over the `items` array in the JSX and make