Handling errors using React's useState

Question

If I have a component that's similar to the below:

import React, { useState } from "react";
import ReactDOM from "react-dom";

function calculateNewValueAndMaybeError(test) {
  try {
    // do something with test that might error
    // const newTest = functionThatMightError(...)
    // if it doesn't error, return { value: newTest, error: '' }
  } catch (err) {
    // is it correct to now return this in case of error?
    // return { value: test.value, error: 'Something went wrong' }
  }
}

function App() {
  const [test, setTest] = useState({ value: "", error: "" });
  return (
    <div>
      <p>Test: {test.value}</p>
      <p>Error: {test.error}</p>
      <button onClick={() => setTest(calculateNewValueAndMaybeError(test))}>
        Click me
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

And I have a button that should mutate the state of my variable called test, is there a way to handle errors without having to pass around the object with both value and error inside all the time?

Otherwise, doesn't this result in necessary code sometimes like the below:

onChange={() => setTest({ value: e.target.value, error: test.error })}

Where you want to update the value of test.value but retain the value of test.error.

I feel like there's something obvious that I'm missing.

Thanks!

Answer 1

That there's a need to merge two states suggests that they should be either handled as different states:

function App() {
  function calculateNewValueAndMaybeError(test) {
    try {
      ...
      setValue(...);
      setError(null);
    } catch (err) {
      setError('Something went wrong');
    }
  }

  const [error, setError] = useState(null);
  const [value, setValue] = useState('');
  return (
    <div>
      <p>Test: {value}</p>
      <p>Error: {error}</p>
      <button onClick={() => setTest(calculateNewValueAndMaybeError(test))}>
        Click me
      </button>
    </div>
  );
}

Or custom state hook could be used to merge error field:

const useErrorState = initialState => {
  const [state, setState] = useState({ ...initialState, error: null });
  const setErrorState = useCallback(stateUpdater => {
    if (typeof stateUpdater === 'function') {
      setState(state => {
        try {
          return {error: null, ...stateUpdater(state) };
        } catch (error) {
          return {...state, error };
        }
      });
    } else {
      setState({error: null, ...stateUpdater });
    }
  }, []);

  return [state, setErrorState];
}

Another possibility is to move error handling to parent component (possibly with higher-order component) and catch errors there.