We're here since September 2017 building e-commerce web apps

Get hooked to React

Build an app to keep track of your favourite movies and tv shows

Join us 💬

tlk.io/react-workshop

React is a declarative, efficient, and flexible JavaScript library for building user interfaces

It let you compose complex UIs from small and isolated pieces of code called “components”

const element = <h1>Hello, world!</h1>;

Template language with the full power of JavaScript

Programming concept where a “virtual” representation of a UI is kept in memory and synced with the “real” DOM

The process is called reconciliation

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "World" };
  }

  render() {
    return <h1>Hello {this.state.name}!</h1>;
  }
}

Hooks are a new addition in React 16.8

Functions that let you “hook into” React features

For example, useState is a Hook that let you add React state to function components

Returns a stateful value and a function to update it

const [state, setState] = useState(initialState);

Only Call Hooks at the Top Level

Only Call Hooks from React Functions

Build search input with a button and a text below with the query, all this using setState

Accepts a function that contains imperative, possibly effectful code

useEffect(() => {
  doSomething(a, b);
}, [a, b]);

fetch("some-url")
  .then(response => response.json())
  .then(resolve, reject)
  .catch(error);

Add useEffect to fetch the search results

useEffect(() => {
  doSomething(a, b);

  return () => {
    cleanup();
  };
}, [a, b]);

Implement the closing detection for modals with a useEffect with a cleanup

Returns a memoized value

const memoizedValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

Memoize the cards in the search result

Returns a memoized callback

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Essentially works as an instance variable

const refContainer = useRef(initialValue);

Convert the value of the search input into a ref

A ref can be passed directly on elements

<div ref={someRef}/>

// there's a difference 🚨

<Component ref={someRef}/>

const Input = forwardRef((props, ref) => {
  // ...

  return <input ref={ref} {...props} />;
});

Use refs directly on elements

☕️ ⏰

Way to share values between components without having to explicitly pass a prop through every level of the tree

<Context value="Hello World!">
    <...>
        <MessageComponent />
    </...>
</Context>

Obtains a value in context by its type

const value = useContext(ContextType);

Instead of prop drilling the API configuration create a shared context and consume it using useContext directly

Functions that use other hooks

Implement loading and error state in SearchResults with only state

A function that receives a state and an action and returns a new state

const newState = reducer(state, action);

const newNumber = reducer(0, { type: 'add', value: 2 });

function reducer(state, action) {
  switch (action.type) {
    case "add":
      return state + action.value;
    case "subtract":
      return state - action.value;
    default:
      return state;
  }
}

Returns the current state paired with a dispatch method

const [state, dispatch] = useReducer(reducer, initialState);

Convert the loading and error logic to a single useReducer

Reducers shared in context

const { store } = useContext(ReduxContext);
const { getState, dispatch } = store;

Move the reducer inside SearchResults into a shared context

Move the fetch inside the SearchContextProvider

The signature is identical to useEffect, but it fires synchronously after all DOM mutations

useLayoutEffect(() => {
  doSomething(a, b);
}, [a, b]);

Customizes the instance value that is exposed to parent components when using ref

useImperativeHandle(ref, createHandle, [deps]);

If you'd like to continue...

React Docs

Dan Abramov's Blog

Thank you 🙇‍

tinyurl.com/getting-hooked-to-react