Рефакторинг компонента React со 165 до 30 строк

поддерживаю, это называется рефакторинг лапши)

Redux против React Context API

Я чего-то не понимаю или плохо понял работу контекст апи, но почему нельзя просто сделать так?

const AppContext = React.createContext();

<AppContext.Provider value={{Context1, Context2, Context3}}>
...children
</AppContext.Provider>

или же если нужна некая производительность то сделать HOC в который можно передавать наблюдателя с каким именно контекстом работать

Генерация CSS-спрайтов с Gulp

Можешь добавить этот вариант в пост

Генерация CSS-спрайтов с Gulp

Немного подумав и почитав документацию stylus, было найдено решение.

Мое решение
Каждой иконке для состояния :hover, дать такое имя icon-(имя икоки):hover
Создать файл темплейт с таким содержимым ( в моем случае это sass, для less,scss допишите скобки )

{{#block "spritesheet"}}
.icon:before
  content: ''
  background-image: url('/static/png/{{{spritesheet.escaped_image}}}')
  background-size : {{spritesheet.px.width}}, {{spritesheet.px.height}}
  display: inline-block
{{/block}}

{{#each sprites}}
.icon.icon-{{name}}:before
  background-position: {{px.offset_x}} {{px.offset_y}}
  width: {{px.width}}
  height: {{px.height}}
{{/each}}