Patrick-DS

// Third-party imports
import React from "react"

// Global imports
import { Tooltip } from "@/components/generic"

// Local imports
import { StyledButton } from "./styles"

////////////////////////////////////////////////////////////////////////////////

Patrick-DS

// useBoolean.js
import { useState, useCallback } from "react"

const useBoolean = (initialState) => {
    const [booleanValue, setBooleanValue] = useState(initialState)
    const setValueToTrue = useCallback(() => setBooleanValue(true), [setBooleanValue])
    const setValueToFalse = useCallback(() => setBooleanValue(false), [setBooleanValue])
    const toggleValue = useCallback(() => setBooleanValue(!booleanValue), [booleanValue, setBooleanValue])
    
    return [booleanValue, setValueToTrue, setValueToFalse, toggleValue]

Patrick-DS

import React, {useState} from "react"
import { ComponentOne, ComponentTwo } from "./somewhere"

const ExampleComponent = (props) => {
    const [selected, setSelected] = setState(false)

    const setSelectedTrue = () => setSelected(true)
    const setSelectedFalse = () => setSelected(false)
    const toggleSelected = () => setSelected(!selected)

Patrick-DS

// CountingButton.js
import React from "react"

const CountingButton = ({ onClick, count }) => (
    <button onClick={onClick}>
        {`You clicked me ${count} times!`}
    </button>
)

export default CountingButton

Patrick-DS

// CountingButton.js
import React, { useState, useEffect } from "react"

const CountingButton = ({ onClick, count }) => {
    const [displayText, setDisplayText] = useState("")

    useEffect(() => {
        setDisplayText(`You clicked me ${count} times!`)
    }, [count, setDisplayText])