BFE.dev solution for React Coding Question
1. the React Counter app

This is the very basic example on React homepage.

useState() to hold the count

Since we need to persist the count and also render it on UI, useState() is the right approach here.

import React, {useState} from 'react'

export function App() {

  const [count, setCount] = useState(0)
  return (
    <div>
      <button data-testid="decrement-button" onClick={() => setCount(count - 1)}>-</button>
      <button data-testid="increment-button" onClick={() => setCount(count + 1)}>+</button>
      <p>clicked: {count}</p>
    </div>
  )
}

better use useState((prevState) => newStae)

setCount(count - 1) is not the best option, explained here, let's try passing a function.

import React, {useState} from 'react'

export function App() {

  const [count, setCount] = useState(0)
  return (
    <div>
      <button data-testid="decrement-button" onClick={() => setCount(count => count - 1)}>-</button>
      <button data-testid="increment-button" onClick={() => setCount(count => count + 1)}>+</button>
      <p>clicked: {count}</p>
    </div>
  )
}

useCallback() to persist the callbacks

onClick now is set with an arrow function, this function is newly created on every render, we can use useCallbac() to avoid this.

import React, {useState, useCallback} from 'react'

export function App() {

  const [count, setCount] = useState(0)
  const decrease = useCallback(() => setCount(count => count - 1), [])
  const increase = useCallback(() => setCount(count => count + 1), [])
  return (
    <div>
      <button data-testid="decrement-button" onClick={decrease}>-</button>
      <button data-testid="increment-button" onClick={increase}>+</button>
      <p>clicked: {count}</p>
    </div>
  )
}

data attributs could be used to create single event handler

In above example, we need to create hander for decrease and increase, this is not scalable. We can create just one handler and config it by data attributes

import React, {useState, useCallback} from 'react'

export function App() {

  const [count, setCount] = useState(0)
  const update = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
    const change = parseInt(e.currentTarget.dataset.change ?? '0')
    setCount(count => count + change)
  }, [])
  return (
    <div>
      <button data-testid="decrement-button" data-change="-1" onClick={update}>-</button>
      <button data-testid="increment-button" data-change="1" onClick={update}>+</button>
      <p>clicked: {count}</p>
    </div>
  )
}

useReducer() could be used for even more complex interactions

This is the code demo from React homepage, which demonstrrate useReducer() as an alternative to useState(), which might be more favorable if you are used to Redux toolchain.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state: {count: number}, action: {type: 'increment' | 'decrement'}) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
  }
}

export function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <button
        data-testid="decrement-button"
        onClick={() => dispatch({ type: 'decrement' })}
      >
        -
      </button>
      <button
        data-testid="increment-button"
        onClick={() => dispatch({ type: 'increment' })}
      >
        +
      </button>
      <p>clicked: {state.count}</p>
    </div>
  );
}