DEV Community: Christian Hansen

Custom React Hooks: Creating a useClock Hook

Christian Hansen — Tue, 02 Jul 2019 13:29:32 +0000

Customs hooks are a powerful part of the new hooks api of React. In this article I will give an example to show off how to build a custom hook and when you might want to do this.

Rules of custom hooks

First, I want to enumerate some rules of hooks. Usually the names of custom hooks begin with use in the name, like useState, useReducer, etc. I think it is best to follow that pattern although I am not positive it must begin with use. The other rules are as follows,

Hooks can be called from within React function components
Hooks can be called from within custom hooks
Hooks can't be called within conditional logic, loops, etc. They must be called in the same order each time.

Reasons for using custom hooks

With the release of hooks, React function components can now have state and lifecycle effects. This allows us to share code and create new abstractions. There are different reasons you might want to create a custom hook.

A good time to turn to custom hooks is when there is duplication between components. When you notice it, you can extract out a custom hook and use it in both places. Perhaps another good time to use a custom hook is when a component has complicated logic and extracting it into a hook with a good name would help make the code cleaner and clearer.

Clock Component

In the example below, I have a basic example of a component that displays the current time. We are going to extract out the state and effect so that we can show the current time in lots of places. Before hooks, you probably would have had to use a higher order class or the render prop pattern. Hooks allows us to share this code without having a lot of nesting divs and components.

A few things I want to review before we extract what we need into our custom hook. When we call useState it takes in the initial state and returns an array of two things that we can name whatever we want. The first is a reference to the state and the second is a function that will update the state. The useEffect hook will run when the component mounts because we provided the empty array. When it unmounts, it will run the function that I return from the function I gave to useEffect which will clear out the interval.

const Clock = () => {
  const [clock, setClock] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    let id = setInterval(() => {
      setClock(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return <h1>{clock}</h1>;
}

Below I have extracted setting up the state and the effect. I then return just the state which is clock. Anywhere the useClock is used it will run these hooks and return the clock state.

const useClock = () => {
  const [clock, setClock] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    let id = setInterval(() => {
      setClock(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return clock;
}

const Clock = () => {
  const clock = useClock();
  return <h1>{clock}</h1>;
}

Final Thoughts

Hooks are an excellent way to cleaner React code. They are a powerful new part of the React api. As you begin to use hooks look for custom hooks that you can extract from your function components remove duplication from your codebase.

ReactHooks: useState

Christian Hansen — Tue, 18 Jun 2019 19:18:58 +0000

State in Functional Components

A functional React component is a function which takes props in as an argument, its name begins with a capital, and returns JSX. Functional components can be written with arrow functions and standard functions. Below are some examples of Functional Components.

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

const Hi = ({name}) => <h2>Hi, {name}</h2>

const Buttons = () => {
  return (
    <div>
      <button>Rain</button>
      <button>Snow</button>
    </div>
  )
}

function App() {
  return (
    <div>
      <Hello name={"World"}/>
      <Hi name={"Jim"} />
      <Buttons />
    </div>
  );
}

Prior to the release of hooks, local state could only be added to a class component. Functional components were called presentational components because they could only present data passed to them.

function CounterWithOutState() {
  return <button>0</button>;
}

class Counter extends React.Component {
  state = { count: 0 };

  onClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return <button onClick={this.onClick}>{this.state.count}</button>;
  }
}

Class components are still supported and there are no plans to remove them from the API. The addition of hooks provides a different way to add state that some may find more desirable. Note that hooks can not be used within classes.

useState API

Below is an example of the useState hook.

function Counter() {
  const [count, setCount] = React.useState(0);
  const onClick = () => setCount(count + 1);
  return <button onClick={onClick}>{count}</button>;
}

Initial state is passed into useState and an array of two things is returned. The first item in the array is a reference to the state and the second is a function to update the state. Whatever that is passed into the function, which in this example is called setCount, will overwrite the currently stored state. The two items in the array can be named to whatever fits the situation best, which helps the two be described better.

The updater function can also be passed a function instead of the new value. This function will have the previous value passed in as the first argument. This function will be run and the return value will be the new value of the state.

 const onClick = () => setCount(prevCount => prevCount + 1);

The useState hook can be used multiple times in the function. Below are two different examples. One that uses useState once and the other uses useState twice. Which one is better is probably personal preference, however both could be taken to extremes in which code would be difficult to understand.

  // One useState

  const [state, setState] = React.useState({
    input: '',
    list: [],
  });
  const onChange = event => setState({
    ...state,
    input: event.target.value,
  })
  const onClick = () => setState({
    ...state,
    list: [...state.list, state.input]
  })

 // Two useStates

 const [input, setInput] = React.useState("initial");
 const [list, setList] = React.useState([]);

 const onChange = event => setInput(event.target.value)
 const onClick = () => setList([...list, input])

Basics of making custom hooks in React

Christian Hansen — Thu, 28 Feb 2019 17:19:55 +0000

Why use hooks?

Hooks are a new feature in React. They are an excellent way to share stateful logic between components. They are also incredibly composable which fits in great with React since React is all about composition.

Please see the hooks documentation for more information on the basics of hooks. I will also list some other great resources at the end of this post.

Rules to be considered a custom hook

The name of the custom hook needs to start with use like useState.
The custom hook can call other hooks.
The custom hook needs to follow the rules of using hooks, this being only calling hooks from the top level of the function only. You can not call hooks from within conditionals, loops, or nested functions.

Basic example

Here is a simple and trivial example to get us started. This is a custom hook called useCounter. A user of this hook can create a counter with ease by passing in the initial count and then using the count and functions returned.

I first have the use of the custom hook in a Counter component. All I have to do is invoke it and I get the state and functions I need.

import React from 'react'
import useCounter from './useCounter'

const Counter = ({initialCount}) => {
    // here is the invocation of useCounter
    // I can pass in the initial count
    // It returns to me the count as well as two functions to help me change it
    const { count, increment, decrement } = useCounter(initialCount) 

    return (
        <div>
            <button onClick={increment}>Increment</button>
            <h1>{count}</h1>
            <button onClick={decrement}>Decrement</button>
        </div>
    )
}

Here is the implementation of useCounter. It follows the rules as stated above. It begins with use and calls other hooks from within it. The other hooks are called at the top level. I could have easily included this within the Counter component, but it is super useful to be able to extract the logic and state into a custom hook when logic gets complicated or needs to be reused.

import React from 'react'

const useCounter = initial => {
    const [count, setCount] = React.useState(initial)
    const increment = () => {
        setCount(c => c + 1)
    }

    const decrement = () => {
        setCount(c => c - 1)
    }

    return {
        count,
        increment,
        decrement,
    }
}

Here is another example. This one uses useEffect as well as useState. This hook could be imported anywhere you need a clock in your application. You would only need to invoke it and then clock would always hold the current local time.

import React from 'react'

const useClock = () => {
    const [clock, setClock] = React.useState(new Date().toLocaleTimeString())

    React.useEffect(() => {
        let intervalId = setInterval(() => {
            setClock(new Date().toLocaleTimeString())
        }, 1000)
        return () => {
            clearInterval(intervalId)
        }
    }, [])

    return {
        clock,
    }
}

Hooks composition

Thus far in this article, I have shown custom hooks that use the base hooks of useState and useEffect which React provides. Hooks can call other custom hooks as well! This leads to a powerful composition of hooks pattern.

Below is an example of using a custom hook within another custom hook. It easily could have been implemented in one hook, but hopefully it demonstrates composing them.

import React from 'react'

const useIsEmpty = () => {
    const [count, setCount] = React.useState(0)
    const empty = React.useMemo(() => count === 0, [count])

    const increment = () => {
        setCount(x => x + 1)
    }
    const decrement = () => {
        setCount(x => x - 1)
    }

    return {
        empty,
        increment,
        decrement,
    }
}

const useList = () => {
    const [list, setList] = React.useState([])
    const {empty, increment, decrement} = useIsEmpty()
    const addToEnd = (newItem) => {
        setList(l => [...l, newItem])
        increment()
    }
    const removeLast = () => {
        setList(l => [...l.slice(0, l.length)])
        decrement()
    }

    return {
        list,
        addToEnd,
        removeLast,
        empty
    }
}

Try out hooks today!

See what you can do with hook. Try implementing something you would normally do in React but with hooks.

Check out this list of hooks to see what others are doing.
Check out this great post by Tanner Linsley on hooks
Also have a look at this post by Dan Abramov. He has been posting lots of awesome content and people have been helping to translate it into many languages!

Thanks for reading!

Testing with react-testing-library

Christian Hansen — Wed, 27 Feb 2019 15:25:15 +0000

The philosophy of react-testing-library

"The more your tests resemble the way your software is used, the more confidence they can give you." - Kent C. Dodds

This is the guiding principle in react-testing-library. The library helps you write tests that interact with your components in a way that the user would interact with the components. The library also focuses on testing without testing the implementation details. I will explore these ideas in this article and hopefully persuade you to give this amazing library a shot. Many thanks to Kent C. Dodds and all other contributors for this great piece of software.

Basics

As I show some examples below, please note that I am using Jest as my test runner. react-testing-library is a utility to test react components. It is not a replacement for Jest or other tools like Jest.

I will first render my component. I will do this using the render function, of course 😏, imported from react-testing-library. Useful functions are then returned from render that can be used to test our component. The components are fully rendered (not shallow rendered) therefore everything can be interacted with.

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import Counter from './Counter'

it("starts at 0 and it is incremented to 1", () => {
    // Render takes a component (props can be passed in as well
    // I am going to use getByTestId to access elements
    const { getByTestId } = render(<Counter />)

    // getByTestId will match elements by the attribute data-testid="count"
    // here I saved two elements in their respective variables
    const count = getByTestId('count')
    const plusButton = getByTestId('plus')

    // I can check properties on the element
    // I want to make sure the tag is showing the  count to be at 0 to begin
    expect(count.textContent).toBe('0')

    // fireEvent is a function that we imported from the library
    // it allows us to click on the button the way the user would.
    // I simply access the click function on it and pass a element for it to click
    fireEvent.click(plusButton)

    // Asserting that it now is now 1
    expect(count.textContent).toBe('1')
})

The component that I tested is below. Other than placing the data-testid attributes, I did not test the implementation. I will show other methods of accessing elements, later in the article, that do not require placing data-testid attribute on.

import React from 'react'

class Counter extends React.Component {
    state = {
        count: 0
    }

    increment = () => {
        this.setState(x => ({
            count: x.count + 1
        }))
    }

    render(){
        return (
            <div>
                <h1 data-testid="count">{this.state.count}</h1>
                <button data-testid="plus" onClick={this.increment}>+</button>
            </div>
        )
    }
}

Below I have the same component refactored to use hooks and the test above does not break. This is extremely satisfying and something that might be harder to achieve when using other react testing utilities.

const Counter = () => {
    const [count, setCount] = React.useState(0)
    const increment = () => {
        setCount(count + 1)
    }

    return (
        <div>
            <h1 data-testid="count">{count}</h1>
            <button data-testid="plus" onClick={increment}>+</button>
        </div>
    )
}

More in depth example

The below example has a few new things I have not shown yet. Here I use getByPlaceholderText and getByLabelText to show how you can access elements without needing to place data-testid. I also use fireEvent.change to place a new value on the input in the way a user would.

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import Problem from './Problem'

it("has two inputs that I can change to see if it works", () => {
    // Arrange
    const { getByTestId, getByPlaceholderText, getByLabelText } = render(<Problem total={30}/>)
    const checkResult = getByTestId('check')
    // The getByPlaceholderText work as you would expect, the input can be found
    // via the value of the PlaceholderText attribute
    const input_one = getByPlaceholderText('Place the first number here!')
    // The getByLabelText grabs the input by the label
    const input_two = getByLabelText('Number 2')
    const result = getByTestId('result')

    // Act
    fireEvent.change(input_one, { target: { value: 10 } })
    fireEvent.change(input_two, { target: { value: 20 } })
    fireEvent.click(checkResult)

    // Asserting that it was correct
    expect(result.textContent).toBe('Good')
})

Here is the component below. I used hooks because I love hooks! Check out the hooks documentation for more information on using them.

import React from 'react'

export default ({ total }) => {
    const [input1, setInput1] = React.useState(0)
    const [input2, setInput2] = React.useState(0)
    const [status, setStatus] = React.useState(false)

    const update1 = e => setInput1(Number(e.target.value))
    const update2 = e => setInput2(Number(e.target.value))

    const checkAnswer = () => setStatus(input1 + input2 === total)

    return(
        <div>
            <label>Number 1
                <input type="Number" 
                       value={input1} 
                       placeholder='Place the first number here!'
                       onChange={update1}/>
            </label>
            <h2>+</h2>
            <label>Number 2
                <input type="Number" 
                       value={input2}
                       onChange={update2}/>
            </label>
            <h2>=</h2>
            <h2>total</h2>
            <button data-testid="check" onClick={checkAnswer}>Check Answer</button>
            <h2 data-testid="result">{status ? 'Good' : 'Wrong'}</h2>
        </div>
    )
}

If you have multiple tests, it is important to import a function from react-testing-library called cleanup. This will remove components in between tests to prepare for the next render.

import { render, cleanup} from 'react-testing-library'

afterEach(cleanup)

If you are using hooks in your react components check out the documentation for when some special setup might be needed (due to the asynchronous nature of useEffect).

Conclusion

Check out the react-testing-library docs for more information. I have posted the project below where you can find my examples. I encourage everyone to use react-testing-library in your next project. Thank you for taking the time to read.

ChrisWcs / rtl-example

react-testing-library examples

This project contains testing examples that use react-testing-library

use `npm test` to run the examples.

View on GitHub

constate, light weight state management in React

Christian Hansen — Sun, 24 Feb 2019 05:36:18 +0000

Introduction

Now that hooks have been released, I believe that we will see patterns emerge and the community will find hooks solving problems and simplifying code. This article is a basic introduction to constate, a light weight solution to state management that takes advantage of hooks. Please feel free to comment below on what you think of the topic and the library. Please keep the discussion civil, thank you!

Simple API + Hooks

The API of the library is very simple. We have one function that we will be using called createContainer and then we will be using built in hooks to do the rest. It is not very opinionated in a lot of ways which makes it flexible to the users desired style and organization. The simple (and incredibly trivial) example below shows how it works.

import React from "react"
import createContainer from "constate"

// Our custom hook that returns what will be available in our context
function useText() {
    const [text, setText] = React.useState('hello')

    const changeLang = () => {
        setText('hola')
    }

    return {
        text,
        changeLang,
    }
}

// Our container
const TextContainer = createContainer(useText)

// we now use the useContext hook to pull out the Context
function TextButton() {
    const { changeLang } = React.useContext(TextContainer.Context)
    return <button onClick={changeLang}>Change</button>
}

function TextBox() {
    const { text } = React.useContext(TextContainer.Context)
    return <h1>{text}</h1>
}

// the Container has a provider on it that we need to wrap our components in
function App() {
    return (
        <TextContainer.Provider>
            <TextButton />
            <TextBox />
        </TextContainer.Provider>
    )
}

The Todo List Example

Yes I made a todo list. I do apologize if this makes you sad 😩. I will make more original examples in the future 😎. In the meantime let's check it out.

// This is the useTodos custom hook that will be passed to createContainer
import React from 'react';

const useTodos = () => {
    const [ todos, setTodos ] = React.useState([]);
    const [ val, setVal ] = React.useState('')

    const addTodo = () => {
        setTodos([ val, ...todos ]);
        setVal('');
    }

    const updateForm = (e) => {
        setVal(e.target.value);
    }

    return {
        todos, 
        val, 
        addTodo, 
        updateForm
    }
}

export default useTodos;

Notice above how I could have approached it in different ways. I could have had one useState call that held all of the state, or I could have used useReducer if I wanted something resembling Redux. This shows the flexibility that the library offers.

Here is one of the components to show how to access the state and functions. Using destructuring, I can pull off all of the values and functions that this component needs. The other components access the state in the same way.

import React from 'react';
import TodoContainer from './TodoContainer';

const TodoInput = () => {
    const {val, updateForm, addTodo} = React.useContext(TodoContainer.Context);
    return (
        <div>
            <input value={val} onChange={updateForm}/>
            <button onClick={addTodo}>ADD</button>
        </div>
    );
}

export default TodoInput;

Find the rest of the code here. Consider checking out constate and explore hooks in your next project. Thank you for taking the time to read this!

DEV Community: Christian Hansen

Custom React Hooks: Creating a useClock Hook

Rules of custom hooks

Reasons for using custom hooks

Clock Component

Final Thoughts

ReactHooks: useState

State in Functional Components

useState API

Basics of making custom hooks in React

Why use hooks?

Rules to be considered a custom hook

Basic example

Hooks composition

Try out hooks today!

Testing with react-testing-library

The philosophy of react-testing-library

Basics

More in depth example

Conclusion

ChrisWcs / rtl-example

react-testing-library examples

This project contains testing examples that use react-testing-library

use `npm test` to run the examples.

constate, light weight state management in React

Introduction

Simple API + Hooks

The Todo List Example

ChrisWcs / examples_of_constate

Example of use of constate and react hooks

Example of using constate for state management

DEV Community: Christian Hansen

Custom React Hooks: Creating a useClock Hook

Rules of custom hooks

Reasons for using custom hooks

Clock Component

Final Thoughts

ReactHooks: useState

State in Functional Components

useState API

Basics of making custom hooks in React

Why use hooks?

Rules to be considered a custom hook

Basic example

Hooks composition

Try out hooks today!

Testing with react-testing-library

The philosophy of react-testing-library

Basics

More in depth example

Conclusion

ChrisWcs / rtl-example

react-testing-library examples

This project contains testing examples that use react-testing-library

use npm test to run the examples.

constate, light weight state management in React

Introduction

Simple API + Hooks

The Todo List Example

ChrisWcs / examples_of_constate

Example of use of constate and react hooks

Example of using constate for state management

use `npm test` to run the examples.