Egghead Instructor Tim Kindberg

Tim Kindberg

Tim Kindberg is a developer striving to master all that is Front End related with focused experience in React and Angular. Tim also has a background in Graphic Design, UI/UX Design, Animation and eLearning. He works at Kroger Technology on the Products team using modern web tech to redefine the grocery world. He's also a contributor to open source in his limited free time.



Unlock all of Tim's PRO Lessons
click for instant access!

Browse Tim Kindberg's lessons.

showing 23 lessons...

Optimize Component Rendering using Recompose

P

Learn How Recompose Optimizes Higher Order Components

P

Optimize Expensive Computations in Recompose

P

Show Error Messages based on Non-Optimal States with Recompose

P

Set the HTML Tag of a Component via a Prop using Recompose

P

Render Components Based on Predicates in Recompose

P

Show a Spinner While a Component is Loading using Recompose

P

Add Lifecycle Hooks to a Functional Stateless Component using Recompose

P

Flatten a Prop using Recompose

P

Lock Props by using the Recompose withProps Higher Order Component

P

Transform Props by using the Recompose mapProps Higher Order Component

P

Compose Multiple Higher Order Components Together using Recompose

P

Add Local State to a Functional Stateless Component using Recompose

P

Add Local State with Redux-like Reducers using Recompose

P

Write a Higher Order Component from Scratch

P

Riot JS - Repeating Elements with Each Attribute

P

Riot JS - Scoped CSS and Toggled Classes

P

Riot JS - DOM Events

P

Riot JS - Tag Life Cycle Hooks

P

Riot JS - Tag Options

P

Riot JS - Getting Started with this React-like micro-library

P

ui-router: Abstract States

P

ui-router: Activating States

P
react tutorial about Optimize Component Rendering using Recompose

Optimize Component Rendering using Recompose

6:14 react PRO

Learn how and when to use the ‘pure’, ‘onlyUpdateForKeys’,
‘onlyUpdateForPropTypes’, and ‘shouldUpdate’ higher order components.
Each one provides a certain granularity of control over prevent
unnecessary renders. Learn how they build upon each other to provide
different options.

react tutorial about Learn How Recompose Optimizes Higher Order Components

Learn How Recompose Optimizes Higher Order Components

3:36 react PRO

Learn about optimizations (like component squashing) that Recompose uses behind the scenes. More reading on Performance.

react tutorial about Optimize Expensive Computations in Recompose

Optimize Expensive Computations in Recompose

1:33 react PRO

Learn how to use the 'withPropsOnChange' higher order component to help ensure that expensive prop computations are only executed when necessary. Simply specify which props are “expensive” and provide a factory function for those props.

react tutorial about Show Error Messages based on Non-Optimal States with Recompose

Show Error Messages based on Non-Optimal States with Recompose

4:34 react PRO

Learn how to use the ‘branch’ and ‘renderComponent’ higher-order components to show errors or messaging when your component is in a non-optimal state. Avoid putting extraneous logic to show errors or messaging into your core component by organizing your non-optimal states into custom higher-order components.

react tutorial about Set the HTML Tag of a Component via a Prop using Recompose

Set the HTML Tag of a Component via a Prop using Recompose

2:33 react PRO

Learn how to user the ‘componentFromProp’ helper and ‘defaultProps’ higher order component to swap the underlying html tag of your component. Sometimes we want a component to behave the same overall but to use a different element in the HTML output. An example is swapping an for a or even a react router depending on circumstance.

react tutorial about Render Components Based on Predicates in Recompose

Render Components Based on Predicates in Recompose

1:43 react PRO

Learn how to use the ‘branch’ and ‘renderNothing’ higher-order
components to render nothing when a certain prop condition is
met. Sometimes you only want to render a component when valid
props exist or are in a certain condition; ‘renderNothing’ is
an easy way to completely remove the component when you don’t
need to show it.

react tutorial about Show a Spinner While a Component is Loading using Recompose

Show a Spinner While a Component is Loading using Recompose

2:48 react PRO

Learn how to use the 'branch' and 'renderComponent' higher-order components to show a spinner while a component loads.

react tutorial about Add Lifecycle Hooks to a Functional Stateless Component using Recompose

Add Lifecycle Hooks to a Functional Stateless Component using Recompose

2:56 react PRO

Learn how to use the 'lifecycle' higher-order component to conveniently use hooks without using a class component.

react tutorial about Flatten a Prop using Recompose

Flatten a Prop using Recompose

1:10 react PRO

Learn how to use the ‘flattenProp’ higher order component to take a single object prop and spread each of its fields out as a prop.

react tutorial about Lock Props by using the Recompose withProps Higher Order Component

Lock Props by using the Recompose withProps Higher Order Component

2:32 react PRO

Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden.

react tutorial about Transform Props by using the Recompose mapProps Higher Order Component

Transform Props by using the Recompose mapProps Higher Order Component

2:49 react PRO

Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its props). 'mapProps' takes incoming props and changes them however you’d like; for example, filtering the props by a field.

react tutorial about Compose Multiple Higher Order Components Together using Recompose

Compose Multiple Higher Order Components Together using Recompose

3:46 react PRO

Learn how to use the 'compose' function to mix together HOCs, even ones from other libraries like 'connect' from redux.

react tutorial about Add Local State to a Functional Stateless Component using Recompose

Add Local State to a Functional Stateless Component using Recompose

6:21 react PRO

Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local state to—and create a reusable local state pattern for—your functional stateless components. No need for classes!

react tutorial about Add Local State with Redux-like Reducers using Recompose

Add Local State with Redux-like Reducers using Recompose

2:36 react PRO

Learn how to use the 'withReducer' higher order component using the alternative reducer form. If you like using reducers in redux, you’ll be able to reuse that same technique but for local state.

react tutorial about Write a Higher Order Component from Scratch

Write a Higher Order Component from Scratch

3:15 react PRO

Learn the proper patterns for writing a higher order component from scratch.

js tutorial about Riot JS - Repeating Elements with Each Attribute

Riot JS - Repeating Elements with Each Attribute

4:01 js PRO

It's easy to repeat over a collection and render many elements. Riot works very similar to Angular and has various syntaxes for it's each attribute. We'll look at the typical syntax for arrays, a shortened syntax, and an object key/value syntax.

js tutorial about Riot JS - Scoped CSS and Toggled Classes

Riot JS - Scoped CSS and Toggled Classes

2:41 js PRO

Riot takes a 'keep your styles close' approach with custom tags. You are encouraged to place your styles for a tags element right inline with the html and javascript. Learn how riot parses the inline styles as well as ways to keep your styles from bleeding out to the rest of your app. Scoped styles provide great isolation for your custom tag. Use the class attribute's special binding syntax to easily add and remove a class based on an expression.

js tutorial about Riot JS - DOM Events

Riot JS - DOM Events

2:49 js PRO

Riot can listen for raw dom events on any element by adding the on* attribute to elements and referencing an event handler. Let's walk through a couple examples.

js tutorial about Riot JS - Tag Life Cycle Hooks

Riot JS - Tag Life Cycle Hooks

2:48 js PRO

Every tag in Riot has a lifecycle. I'll explore the three hooks: mount, update, and unmount while adding an animation feature for an existing tag. Lifecycle hooks are important for setting up, tearing down, and keeping a tag's view up to date after external logic is run.

js tutorial about Riot JS - Tag Options

Riot JS - Tag Options

2:20 js PRO

Tag Options allow you to abstract your custom tag elements into reusable objects by allowing the tag-user to specify the dynamic parameters of their component.

js tutorial about Riot JS - Getting Started with this React-like micro-library

Riot JS - Getting Started with this React-like micro-library

2:43 js PRO

Getting started with Riot JS. We'll discuss riot's compile and mount process and build a small hello world component with simple data-binding.

angularjs tutorial about ui-router: Abstract States

ui-router: Abstract States

3:17 angularjs PRO

ui-router has the powerful ability to define abstract states, or states that can't be navigated to, but are useful for defining a set of states with shared properties.

angularjs tutorial about ui-router: Activating States

ui-router: Activating States

4:04 angularjs PRO

The ui-router library for AngularJS provides several options for navigating between states in your application. You can navigate via the browser's URL bar, programatically with $state.go, and with the ui-sref directive on your HTML elements.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?