Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to React And not shoot yourself in the foot

How to React And not shoot yourself in the foot

React is awesome... But like any awesome tool, it should be used with caution. Let's explain how React works and why/how its should be used.

Cc95ef8bf38403916f40854c4ede4853?s=128

Pierre GOUDJO

December 30, 2021
Tweet

More Decks by Pierre GOUDJO

Other Decks in Programming

Transcript

  1. How to React Pierre GOUDJO And not shoot yourself in

    the foot
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. const element = ( <h1 className="greeting"> Hello, world! </h1> );

    JSX: not a string, not a HTML tag either
  9. const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

    Babel Magic 🧙🪄✨
  10. ———————————————index.html——————————————————— <div id=“root"></div> ———————————————index.jsx———————————————————— const element = <h1>Hello, world</h1>; ReactDOM.render(element,

    document.getElementById(‘root')); Rendering an element into the DOM
  11. function tick() { const element = ( <div> <h1>Hello, world!</h1>

    <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render(element, document.getElementById('root')); } setInterval(tick, 1000); Rendering an element multiple times into the DOM
  12. None
  13. None
  14. source: https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html

  15. class HelloMessage extends React.Component { render() { return ( <div>

    Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, document.getElementById('hello-example') ); A simple React component with JSX
  16. class HelloMessage extends React.Component { render() { return React.createElement( "div",

    null, "Hello ", this.props.name ); } } ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example')); This is the real code executed by the browser
  17. class HelloMessage extends React.Component { render() { return React.createElement( "div",

    null, "Hello ", this.props.name ); } } ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example')); Look like the component is a “function”
  18. function HelloMessage(props) { return <h1>Hello, {props.name}</h1>; } ReactDOM.render(React.createElement(HelloMessage, { name:

    "Taylor" }), document.getElementById('hello-example')); Obvious here
  19. f: props → element A React component

  20. None
  21. function tick() { const element = ( <div> <h1>Hello, world!</h1>

    <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); Let’s make this in a truly reusable component
  22. function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is

    {props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('root') ); } setInterval(tick, 1000); Clock is now an isolated component but doesn’t manage the time to be displayed
  23. ReactDOM.render( <Clock />, document.getElementById('root') ); Ideally, that’s what we want…

  24. State to the rescue

  25. class Clock extends React.Component { constructor(props) { super(props); this.state =

    {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } State use instead of props
  26. class Clock extends React.Component { constructor(props) { super(props); this.state =

    {date: new Date()}; } componentDidMount() { } componentWillUnmount() { } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } Lifecycle methods
  27. class Clock extends React.Component { constructor(props) { super(props); this.state =

    {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } Update the date at fi xed interval
  28. const Clock = (props) => { const [date, setDate] =

    useState(new Date()) useEffect( () =>{ const timerId = setInterval( () => setDate(new Date()), 1000 ); return () =>{ clearInterval(timerId) } }, ) return ( <div> <h1>Hello, world!</h1> <h2>It is {date.toLocaleTimeString()}.</h2> </div> ) } Same thing with a functional component
  29. f: state → props → element A React component

  30. State introduces complexity

  31. None
  32. Don’t use React

  33. Resist building a SPA (using React or else)

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. Build tiny/focused components

  41. None
  42. Go SPA only if you have to

  43. None
  44. None
  45. Limit React to the view part of your app

  46. Avoid state as much as possible in React components

  47. Manage the state of your application outside of the React

    components
  48. None
  49. None
  50. None
  51. QUESTIONS?

  52. THE END