WDS - React Hooks & arrays

Reference useDebugValue

Can only be used with 'custom hooks'.
It is used to display the value inside a custom hook in the dev tools.

WDS Video on this Hook

import React, { useDebugValue, useState } from "react";

function ExampleUseDebugValue() {
  const [firstName, setFirstName] = useState(null);
  const [lastName, setLastName] = useCustomName();

  return (
    <Stack alignItems={"center"} sx={{ width: "100%", maxWidth: "40dvw", margin: 2, backgroundColor: "lightblue", padding: 7, borderRadius: 15 }}>
      <Box>
        <input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
      </Box>
      <Box>
        <input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} />
      </Box>
    </Stack>
  )
}

function useCustomName(defaultValue) {
  const [value, setValue] = useState(defaultValue);

  // You will be able to see whatever you put here at the top level of the debug tools
  useDebugValue(value);

  return [value, setValue];
}

React Hooks

React Custom Hooks

Array Methods

Reference useDebugValue

WDS Video on this Hook