title: Usage of useCallback and setting new object state using previous state as argument
body: <p>Consider this basic form fields component with a custom form hook to handle input changes: </p>
  
  <pre><code>import React, { useState, useCallback } from 'react';
  
  const useFormInputs = (initialState = {})=&gt; {
      const [values, setValues] = useState(initialState);
      const handleChange = useCallback(({ target: { name, value } }) =&gt; {
          setValues(prev =&gt; ({ ...prev, [name]: value }));
      }, []);
      const resetFields = useCallback(() =&gt;
          setValues(initialState), [initialState]);
      return [values, handleChange, resetFields];
  };
  
  const formFields = [
      { name: 'text', placeholder: 'Enter text...', type: 'text', text: 'Text' },
      { name: 'amount', placeholder: 'Enter Amount...', type: 'number',
          text: 'Amount (negative - expense, positive - income)' }
  ];
  
  export const AddTransaction = () =&gt; {
      const [values, handleChange, resetFields] = useFormInputs({
          text: '', amount: ''
      });
      return &lt;&gt;
          &lt;h3&gt;Add new transaction&lt;/h3&gt;
          &lt;form&gt;
              {formFields.map(({ text, name, ...attributes }) =&gt; {
                  const inputProps = { ...attributes, name };
                  return &lt;div key={name} className="form-control"&gt;
                      &lt;label htmlFor={name}&gt;{text}&lt;/label&gt;
                      &lt;input {...inputProps} value={values[name]}
                          onChange={handleChange} /&gt;
                  &lt;/div&gt;;
              })}
              &lt;button className="btn"&gt;Add transaction&lt;/button&gt;
          &lt;/form&gt;
          &lt;button className="btn" onClick={resetFields}&gt;Reset fields&lt;/button&gt;
      &lt;/&gt;;
  };
  </code></pre>
  
  <ol>
  <li><p>Is there really any reason / advantage for me to use useCallback to cache the function in my custom hook? I read the docs, but I just coudln't grasp the idea behind this usage of useCallback. How exactly it memoizes the function between renders? How exactly does ti work, and should I use it?</p></li>
  <li><p>Inside the same custom hook, you can see the new values state being updated by spreading the previous state and creating a new object like so: <code>setValues(prev =&gt; ({ ...prev, [name]: value }));</code>
  Would there be any difference if I did this instead? <code>setValues({ ...prev, [name]: value })</code>
  as far as I can tell, doesn't look like it has any difference right? I am simply accessing the state directly.. Am I wrong?</p></li>
  </ol>