Debugging Configuration Issues with TanStack Config

Showcase common debugging techniques when facing issues with configurations managed by TanStack Config, using logging and breakpoints.

import { useConfig } from 'tanstack-config';

const MyAppConfig = () => {
  const [config, setConfig] = useConfig();

  // Logging the current configuration to debug
  console.log('Current Config:', config);

  // Updating config to debug changes effect
  setConfig(prevConfig => ({...prevConfig, newSetting: true}));

  // Ensure to watch the config changes in console to see the effect of new settings
  return <div>Check the console for config logs!</div>;
};

This code snippet demonstrates how to use the useConfig hook from TanStack Config to log the current configuration settings. It allows a developer to understand the initial state of the configuration and observe how changes affect the application's behavior. The snippet also showcases updating the configuration as a debugging technique to test new settings or fixes.

import { useEffect } from 'react';
import { useConfig } from 'tanstack-config';

const DebugEffectConfig = () => {
  const [config] = useConfig();

  useEffect(() => {
    // Setting a breakpoint here helps in debugging by inspecting the 'config' state
    console.log('Config updated:', config);
  }, [config]);

  return <div>Configurations are logged on update.</div>;
};

This snippet uses the useEffect hook in conjunction with the useConfig hook. By setting a breakpoint inside the useEffect callback, developers can pause the execution whenever the configuration changes and inspect the new state. This facilitates understanding how and when configuration changes occur, aiding in the debugging of dynamic configuration issues.