35. Debugging in react

35.1 Using console.log

import React from 'react';
const MyComponent = () => {
    const name = 'John Doe';
    console.log(name);
    return (
        <div>
            <h1>Debugging in React</h1>
        </div>
    )
}
export default MyComponent;

35.2 Strict Mode

=> In Strict Mode,React will render components twice. It helps to idenify the issues in the code.

import React,{StrictMode} from 'react';
const MyComponent = () => {
    const name = 'John Doe';
    console.log(name);
    return (
        <StrictMode>
            <div>
                <h1>Debugging in React</h1>
            </div>
        </StrictMode>
    )
}
export default MyComponent;

You can wrap any component in StrictMode.Just difference is that it will render the component twice.

=> We can wrap the entire application in StrictMode in the index.js file.

import React,{StrictMode} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root')
);

35.3 React Developer Tools

React Developer Tools is a Chrome extension that allows you to inspect the React component hierarchy in the Chrome Developer Tools. Videos