toggles and hooks

1_use-toggle.js

import { useState, useCallback } from 'react';

export default function useToggle(initialState) {
  const [isOn, setIsOn] = useState(initialState);
  const turnOn = useCallback(() => setIsOn(true), [setIsOn]);
  const turnOff = useCallback(() => setIsOn(false), [setIsOn]);
  const toggle = useCallback(() => setIsOn(prevState => !prevState), [setIsOn]);

  return { isOn, turnOn, turnOff, toggle, setIsOn };
}

2_class-component.js

function toggle(initialValue, callback) {
  let value = initialValue;

  const isOn = function() {
    return value;
  }

  const setIsOn = function(newValue) {
    value = newValue;
    callback(value);
  }

  const turnOn = function() {
    setIsOn(true);
  }

  const turnOff = function() {
    setIsOn(false);
  }

  const toggle = function() {
    setIsOn(!value);
  }

  return { isOn, turnOn, turnOff, toggle, setIsOn }
}

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      toggleValue: false
    }
    this.toggle = toggle(this.state.toggleValue, newValue => this.setState({ toggleValue: newValue }))
  }
}

3_toggle-hook.js

function toggleHook(initialState) {
  const [isOn, setIsOn] = useState(initialState);
  const theToggle = toggle(initialState, setIsOn);

  return { isOn, turnOn: theToggle.turnOn, turnOff: theToggle.turnOff, toggle: theToggle.toggle }
}