Hi πŸ‘‹Β 

My name is Alex, nice to see you!

Alex Moldovan

@alexnmoldovan

Organizer @ JSHeroes

Product Engineer @ CodeSandbox

https://slides.com/alexmoldovan/custom-hooks

πŸ˜₯

😐

😐

Lifecycle as hooks

componentDidMount

useEffect

componentWillUnmount

return from useEffect*

componentWillReceiveProps

function

componentDidUpdate

useEffect with deps

😐

> sync nature of useEffect

> rules of hooks

> list of dependencies

> callback functions inside functions

😐

πŸ€”

Source: https://reactjs.org/docs/hooks-effect.html

Imperative

Declarative

πŸ€”

Mindset change: separation of concerns

Show me the code!

πŸ€”

πŸ™‚

Imperative

Declarative

πŸ™‚

Logic

View

πŸ™‚

Logic

View

πŸ™‚

πŸ™‚

Custom Hooks

Building your own Hooks lets you extract component logic into reusable functions.

πŸ™‚

Show me the code!

πŸ™‚

Logic

View

JSX function

Custom Hook(s)

😍

πŸ™‚

😍

😍

Show me the code!

πŸ€”

import React from 'react';

var MyMixin = {
  doSomething() {

  }
};
const MyComponent = React.createClass({
  mixins: [MyMixin],
  handleClick() {
    this.doSomething();
  },
  render() {
    return (
      <button onClick={this.handleClick}>Do Something</button>
    );
  }
});

export default MyComponent;

πŸ€”

Adding context to the mix

😍

<Provider value="x">
  <Layout>
    <ComponentA/>
    <ComponentB/>
    <ComponentC/>
  </Layout>
</Provider>

Provide

Consume

😍

😍

😍

https://github.com/codesandbox/sandpack

Show me the code!

😍

😍

Thank you πŸ™Β Questions?

Alex Moldovan

@alexnmoldovan

Co-Founder @ JSHeroes

Product Engineer @ CodeSandbox

https://slides.com/alexmoldovan/custom-hooks

Made with Slides.com