Welcome to @pulsovi/react-debug 👋
provide a hook to debug why and how a component is rerendered
Install
npm install @pulsovi/react-debugUsage
Simplest usage for function component with some states.
import React, { useState } from 'react';
import useDebug from '@pulsovi/react-debug';
export default function SomeComponentToDebug(props) {
const [data, setData] = useState([]);
const [title, setTitle] = useState('empty');
useDebug({ props, state: { data, title }});
// ... your code
return <div>
<h1>{title}</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>;
}useDebug can get second parameter for more infos such in elem of list.
import React, { useState } from 'react';
import useDebug from '@pulsovi/react-debug';
export default function SomeComponentToDebug(props) {
const [value, setValue] = useState(null);
useDebug({ props, state: { value }}, props.title);
// ... your code
return <div>
<h1>{props.title}</h1>
<p>{value}</p>
<aside>{props.details}</aside>
</div>;
}It can also be used in class components more easily.
import React from 'react';
import { debug } from '@pulsovi/react-debug';
class SomeComponentToDebug extends React.Component {
constructor(props) {
super(props);
this.state = { clicked: false };
}
render() {
debug(this, this.props.title);
// ... your code
return <div>
<h1>{this.props.title}</h1>
<p
onClick={() => { this.setState({ clicked: true }); }}
>{this.state.clicked ? 'Click me, please.' : 'Bravo !'}</p>
</div>;
}
}
export default SomeComponentToDebug;Author
- Github: @pulsovi
Show your support
Give a