Can someone explain me how custom hooks get the data and in depth flow of custom hooks

Question

//use Input HOOK

I want to know that how this custom hook work

import { useState } from "react";

export default initialValue => {
  const [value, setValue] = useState(initialValue);
  return {
    value,
    onChange: event => {
      setValue(event.target.value);
    },
    reset: () => setValue("")
  };
};


//todo form

How this onchange method work how it update the data even though no onchange function is write in this programm

import React from "react";
import TextField from "@material-ui/core/TextField";
import useInputState from "./useInputState";

const TodoForm = ({ saveTodo }) => {
  const { value, reset, onChange } = useInputState("");

  return (
    <form
      onSubmit={event => {
        event.preventDefault();
        saveTodo(value);
        reset();
      }}
    >
      <TextField
        variant="outlined"
        placeholder="Add todo"
        margin="normal"
        value={value}
        onChange={onChange}
      />
    </form>
  );
};

export default TodoForm;

view full programm Code Sandbox link

Answer 1

Functions in JS are treated like any other variable. So the de-structured onChange (in the component) is taking the reference for a function which is defined anonymously in the custom hook , which is then used by the onChange method of the TextField component. This is similar to how you pass variables by reference is JS.