Solid for React Developers

In 2023, Solid JS is poised to be the next big frontend framework. Its underlying fundamentals are fundamentally different from React's. This talk will expose my learnings as I have approached Solid from the perspective of a React developer.

Transcript

1. 2023 SolidJS For React Developers Erik Rasmussen
2. 2023 SolidJS For React Developers Erik Rasmussen
3. Erik Rasmussen – @erikras React Developer
4. Erik Rasmussen – @erikras Solid Developer (yet)
5. Erik Rasmussen – @erikras Imperative Programming HOW
6. Erik Rasmussen – @erikras Imperative Programming $(document).ready(() = { });
7. Erik Rasmussen – @erikras Imperative Programming $(document).ready(() = { $('button') });
8. Erik Rasmussen – @erikras Imperative Programming $(document).ready(() = { $('button').on('click', () = { }) });
9. Erik Rasmussen – @erikras Imperative Programming $(document).ready(() = { $('button').on('click', () = { $('#greeting') }) });
10. Erik Rasmussen – @erikras Imperative Programming $(document).ready(() = { $('button').on('click', () = { $('#greeting').addClass('highlighted') }) });
11. Erik Rasmussen – @erikras Declarative Programming WHAT
12. Erik Rasmussen – @erikras Declarative Programming function App() { const [highlighted, setHighlighted] = React.useState(false); return ( <div> <button>Highlight</button> <div>Hello!</div> </div> ); }
13. Erik Rasmussen – @erikras Declarative Programming function App() { const [highlighted, setHighlighted] = React.useState(false); return ( <div> <button onClick={() = setHighlighted(true)}>Highlight</button> <div>Hello!</div> </div> ); }
14. Erik Rasmussen – @erikras Declarative Programming function App() { const [highlighted, setHighlighted] = React.useState(false); return ( <div> <button onClick={() = setHighlighted(true)}>Highlight</button> <div className={highlighted ? "highlighted" : ""}>Hello!</div> </div> ); }
15. Erik Rasmussen – @erikras Reactive Programming is a declarative programming paradigm built on data-centric event emitters – Ryan Carniato @ryancarniato
16. Erik Rasmussen – @erikras Reactive Programming let a = 3; let b = 4; let sum = a + b; console.log(sum); // 7 Imperative Programming
17. Erik Rasmussen – @erikras Reactive Programming let a = 3; let b = 4; let sum = a + b; console.log(sum); // 7 a = 5; Imperative Programming
18. Erik Rasmussen – @erikras Reactive Programming let a = 3; let b = 4; let sum = a + b; console.log(sum); // 7 a = 5; console.log(sum); // 7 Imperative Programming 🙄
19. Erik Rasmussen – @erikras Reactive Programming let a = 3; let b = 4; let sum = a + b; console.log(sum); // 7 a = 5; console.log(sum); // 9 Imperative Programming 🤯
20. Erik Rasmussen – @erikras Reactive Programming let a = () => 3; let b = () => 4; let sum = () => a() + b(); console.log(sum()); // 7
21. Erik Rasmussen – @erikras Reactive Programming let a = () => 3; let b = () => 4; let sum = () => a() + b(); console.log(sum()); // 7 a = () = 5; console.log(sum()); // 9 😎
22. Erik Rasmussen – @erikras Signals
23. Erik Rasmussen – @erikras Signal a value that remembers everyone that reads it, and informs them when the value changes – Erik Rasmussen @erikras
24. Erik Rasmussen – @erikras Signals in Solid const [value, setValue] = createSignal(0);
25. Erik Rasmussen – @erikras Signals in Solid const [value, setValue] = createSignal(0); console.log(value()); // 0
26. Erik Rasmussen – @erikras Signals in Solid const [value, setValue] = createSignal(0); console.log(value()); // 0 setValue(42); console.log(value()); // 42 FOOTGUN #1: Signal values are getter functions!
27. Erik Rasmussen – @erikras Signals in Solid const [value, setValue] = createSignal(0); console.log(value()); // 0 setValue(42); console.log(value()); // 42
28. Erik Rasmussen – @erikras Signals in Solid const [getValue, setValue] = createSignal(0); console.log(getValue()); // 0 setValue(42); console.log(getValue()); // 42
29. Erik Rasmussen – @erikras Signals in Solid const [value, setValue] = createSignal(0); console.log(value()); // 0 setValue(42); console.log(value()); // 42
30. Erik Rasmussen – @erikras Derived Signals in Solid const [count, setCount] = createSignal(0); const double = () => count() * 2;
31. Erik Rasmussen – @erikras Derived Signals in Solid const [count, setCount] = createSignal(0); const double = () => count() * 2; const increment = () => setCount(count() + 1);
32. Erik Rasmussen – @erikras Derived Signals in Solid const [count, setCount] = createSignal(0); const double = () => count() * 2; const increment = () => setCount(count() + 1); console.log(count(), double()); // 0 0 increment(); console.log(count(), double()); // 1 2 increment(); console.log(count(), double()); // 2 4
33. Erik Rasmussen – @erikras Spreadsheets
34. Erik Rasmussen – @erikras The Elephant in the Room
35. Erik Rasmussen – @erikras But... React isn't "reactive"!
36. Erik Rasmussen – @erikras React Solid export const MyComponent = () => { return ( <div> <h1>Pop Quiz</h1> <div>What library is this?</div> </div> ); }; export const MyComponent = () => { return ( <div> <h1>Pop Quiz</h1> <div>What library is this?</div> </div> ); };
37. Erik Rasmussen – @erikras React Solid export const MyComponent = () => { return ( <div> <h1>Pop Quiz</h1> <div>What library is this?</div> </div> ); }; export const MyComponent = () => { return ( <div> <h1>Pop Quiz</h1> <div>What library is this?</div> </div> ); };
38. Erik Rasmussen – @erikras React Solid • Divide UI into "components" • Components are just functions • Components take props • Components output JSX • Component composition via JSX BOTH
39. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS COUNTER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={ () = setCount(count + 1) }>➕</button> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ () = setCount(count() + 1) }>➕</button> </div> ); };
40. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS COUNTER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={ () = setCount(count + 1) }>➕</button> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ () = setCount(count() + 1) }>➕</button> </div> ); };
41. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS COUNTER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={ () = setCount(count + 1) }>➕</button> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ () = setCount(count() + 1) }>➕</button> </div> ); };
42. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS COUNTER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={ () = setCount(count + 1) }>➕</button> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ () = setCount(count() + 1) }>➕</button> </div> ); };
43. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS COUNTER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={ setCount((previous) = previous + 1) }>➕</button> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ () = setCount(count() + 1) }>➕</button> </div> ); };
44. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS COUNTER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={ setCount((previous) = previous + 1) }>➕</button> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ setCount((previous) = previous + 1) }>➕</button> </div> ); };
45. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS COUNTER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={ setCount((previous) = previous + 1) }>➕</button> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ setCount((previous) = previous + 1) }>➕</button> </div> ); };
46. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={ (previous) = setCount(previous + 1) }>➕</button> </div> ); }; export const Counter = () const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ (previous) }>➕</button> </div> ); };
47. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ (previous) }>➕</button> </div> ); };
48. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { }) return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ (previous) }>➕</button> </div> ); };
49. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount(count + 1); }, 1000); }); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ (previous) }>➕</button> </div> ); };
50. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(interval); }); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ (previous) }>➕</button> </div> ); };
51. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(interval); }, [count]); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ (previous) }>➕</button> </div> ); };
52. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((previous) => previous + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ (previous) }>➕</button> </div> ); };
53. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((previous) => previous + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={ (previous) = setCount(previous + 1) }>➕</button> </div> ); };
54. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((previous) => previous + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> </div> ); };
55. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((previous) => previous + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); setInterval(() => { setCount((previous) => previous + 1); }); return ( <div> <h1>{count()}</h1> </div> ); };
56. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((previous) => previous + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); setInterval(() => { setCount((previous) => previous + 1); }); onCleanup(() => clearInterval(interval)); return ( <div> <h1>{count()}</h1> </div> ); };
57. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((previous) => previous + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); setInterval(() => { setCount((previous) => previous + 1); }); onCleanup(() => clearInterval(interval)); return ( <div> <h1>{count()}</h1> </div> ); };
58. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((previous) => previous + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); setInterval(() => { setCount((previous) => previous + 1); }); onCleanup(() => clearInterval(interval)); return ( <div> <h1>{count()}</h1> </div> ); }; FOOTGUN #2: The component function is only called once!
59. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((previous) => previous + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); setInterval(() => { setCount((previous) => previous + 1); }); onCleanup(() => clearInterval(interval)); return ( <div> <h1>{count()}</h1> </div> ); };
60. Erik Rasmussen – @erikras React Solid THE UBIQUITOUS TIMER EXAMPLE export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((previous) => previous + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <div> <h1>{count}</h1> </div> ); }; export const Counter = () => { const [count, setCount] = createSignal(0); setInterval(() => { setCount((previous) => previous + 1); }); onCleanup(() => clearInterval(interval)); return ( <div> <h1>{count()}</h1> </div> ); }; HOOKS JSX RUN ON MOUNT JSX
61. Erik Rasmussen – @erikras React Solid is "just JavaScript" that re-renders to Virtual DOM every time data changes, and performs a diff to know which DOM elements to update is a compiled template language that remembers which DOM elements depend on which state
62. Erik Rasmussen – @erikras Solid export const Counter = () => { const [count, setCount] = createSignal(0); setInterval(() => { setCount((previous) => previous + 1); }); onCleanup(() => clearInterval(interval)); return ( <div> <h1>{count()}</h1> </div> ); };
63. Erik Rasmussen – @erikras Solid export const Counter = () => { const [count, setCount] = createSignal(0); setInterval(() => { setCount((previous) => previous + 1); }); onCleanup(() => clearInterval(interval)); const doubleCount = count() * 2; return ( <div> <h1>{doubleCount}</h1> </div> ); };
64. Erik Rasmussen – @erikras Solid export const Counter = () => { const [count, setCount] = createSignal(0); setInterval(() => { setCount((previous) => previous + 1); }); onCleanup(() => clearInterval(interval)); const doubleCount = count() * 2; return ( <div> <h1>{doubleCount}</h1> </div> ); }; 1. Code before return happens only once!
65. Erik Rasmussen – @erikras Solid export const Counter = () => { const [count, setCount] = createSignal(0); setInterval(() => { setCount((previous) => previous + 1); }); onCleanup(() => clearInterval(interval)); const doubleCount = count() * 2; return ( <div> <h1>{doubleCount}</h1> </div> ); }; 1. Code before return happens only once! 2. JSX should never output a value that's not a signal (because otherwise it would never update) FOOTGUN #3: Only use signals in JSX. Never "get" their value before the JSX.
66. Erik Rasmussen – @erikras Props
67. Erik Rasmussen – @erikras React Solid export const User = (props) => { const { firstName, lastName, photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); }; PROPS export const User = (props) => { const { firstName, lastName, photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); };
68. Erik Rasmussen – @erikras React Solid export const User = (props) => { const { firstName, lastName, photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); }; PROPS export const User = (props) => { const { firstName, lastName, photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); }; 🧙 { get firstName() {} get lastName() {} get photoUrl() {} } 🚩 FOOTGUN #3: Only use signals in JSX. Never "get" their value before the JSX. FOOTGUN #4: Never destructure props!
69. Erik Rasmussen – @erikras React Solid export const User = (props) => { const { firstName, lastName, photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); }; PROPS export const User = (props) => { const { firstName, lastName, photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); };
70. Erik Rasmussen – @erikras React Solid export const User = (props) => { const { firstName, lastName, photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); }; PROPS export const User = (props) => { const { firstName, lastName, photoUrl } = props; return ( <div> <img src={props.photoUrl} alt={`${props.firstName} ${props.lastName}`} /> {props.firstName} {props.lastName} </div> ); };
71. Erik Rasmussen – @erikras React Solid export const User = (props) => { const { firstName, lastName, photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); }; PROPS export const User = (props) => { return ( <div> <img src={props.photoUrl} alt={`${props.firstName} ${props.lastName}`} /> {props.firstName} {props.lastName} </div> ); }; ✅
72. Erik Rasmussen – @erikras React Solid export const User = (props) => { const { firstName = "Erik", lastName = "Rasmussen", photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); }; DEFAULT PROPS export const User = (props) => { const { firstName = "Erik", lastName = "Rasmussen", photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); };
73. Erik Rasmussen – @erikras React Solid export const User = (props) => { const { firstName = "Erik", lastName = "Rasmussen", photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); }; DEFAULT PROPS export const User = (props) => { const { firstName = "Erik", lastName = "Rasmussen", photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); };
74. Erik Rasmussen – @erikras React Solid export const User = (props) => { const { firstName = "Erik", lastName = "Rasmussen", photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); }; DEFAULT PROPS export const User = (props) => { const merged = mergeProps( { firstName: "Erik", lastName: "Rasmussen", }, props ); return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); };
75. Erik Rasmussen – @erikras React Solid export const User = (props) => { const { firstName = "Erik", lastName = "Rasmussen", photoUrl } = props; return ( <div> <img src={photoUrl} alt={`${firstName} ${lastName}`} /> {firstName} {lastName} </div> ); }; DEFAULT PROPS export const User = (props) => { const merged = mergeProps( { firstName: "Erik", lastName: "Rasmussen", }, props ); return ( <div> <img src={merged.photoUrl} alt={`${merged.firstName} ${merged.lastName}`} /> {merged.firstName} {merged.lastName} </div> ); }; ✅
76. Erik Rasmussen – @erikras Common Hooks
77. Erik Rasmussen – @erikras React Solid useEffect is the single most dangerous hook in React – Erik Rasmussen @erikras probably plagiarizing David "Khourshid" 🎹 @davidkpiano probably plagiarizing Dan Abramov @dan_abramov
78. Erik Rasmussen – @erikras React Solid useE ff ect •Adding event listeners •Fetching data •Subscribing to data sources •Scheduling timeouts/intervals in component before return
79. Erik Rasmussen – @erikras React Solid useE ff ect •Play a sound when data changes •Debounced save •Save state to localStorage createE ff ect
80. Erik Rasmussen – @erikras React Solid export const Counter = () => { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); }; E ff ects
81. Erik Rasmussen – @erikras React Solid export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log("Count is now:", count); }); return ( <div> <h1>{count}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); }; useE ff ect
82. Erik Rasmussen – @erikras React Solid export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log("Count is now:", count); }, [count]); return ( <div> <h1>{count}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); }; useE ff ect
83. Erik Rasmussen – @erikras React Solid export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log("Count is now:", count); }, [count]); return ( <div> <h1>{count}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); }; useE ff ect export const Counter = () => { const [count, setCount] = createSignal(0); return ( <div> <h1>{count()}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); };
84. Erik Rasmussen – @erikras React Solid export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log("Count is now:", count); }, [count]); return ( <div> <h1>{count}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); }; useE ff ect export const Counter = () => { const [count, setCount] = createSignal(0); createEffect(() => { console.log("Count is now:", count()); }); return ( <div> <h1>{count()}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); };
85. Erik Rasmussen – @erikras React Solid export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log("Count is now:", count); }, [count]); return ( <div> <h1>{count}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); }; useE ff ect export const Counter = () => { const [count, setCount] = createSignal(0); createEffect(() => { console.log("Count is now:", count()); }, [count]); return ( <div> <h1>{count()}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); };
86. Erik Rasmussen – @erikras React Solid export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log("Count is now:", count); }, [count]); return ( <div> <h1>{count}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); }; useE ff ect export const Counter = () => { const [count, setCount] = createSignal(0); createEffect(() => { console.log("Count is now:", count()); }); return ( <div> <h1>{count()}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); }; NO DEPENDENCY ARRAY NEEDED!!
87. Erik Rasmussen – @erikras React Solid export const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log("Count is now:", count); }, [count]); return ( <div> <h1>{count}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); }; useE ff ect export const Counter = () => { const [count, setCount] = createSignal(0); createEffect(() => { console.log("Count is now:", count()); }); return ( <div> <h1>{count()}</h1> <button onClick={(previous) = setCount(previous + 1) } > ➕ </button> </div> ); };
88. Erik Rasmussen – @erikras React Solid export const Result = (props) => { const expensiveResult = expensiveCalculation(props.value); return ( <div> <h1> The result is: {expensiveResult} </h1> </div> ); }; useMemo
89. Erik Rasmussen – @erikras React Solid export const Result = (props) => { const expensiveResult = useMemo( () = expensiveCalculation(props.value) ); return ( <div> <h1> The result is: {expensiveResult} </h1> </div> ); }; useMemo
90. Erik Rasmussen – @erikras React Solid export const Result = (props) => { const expensiveResult = useMemo( () = expensiveCalculation(props.value), [props.value] ); return ( <div> <h1> The result is: {expensiveResult} </h1> </div> ); }; useMemo
91. Erik Rasmussen – @erikras React Solid export const Result = (props) => { const expensiveResult = useMemo( () = expensiveCalculation(props.value), [props.value] ); return ( <div> <h1> The result is: {expensiveResult} </h1> </div> ); }; useMemo export const Result = (props) => { const expensiveResult = expensiveCalculation(props.value); return ( <div> <h1> The result is: {expensiveResult} </h1> </div> ); }; FOOTGUN #3: Only use signals in JSX. Never "get" their value before the JSX.
92. Erik Rasmussen – @erikras React Solid export const Result = (props) => { const expensiveResult = useMemo( () = expensiveCalculation(props.value), [props.value] ); return ( <div> <h1> The result is: {expensiveResult} </h1> </div> ); }; useMemo export const Result = (props) => { const expensiveResult = () => expensiveCalculation(props.value); return ( <div> <h1> The result is: {expensiveResult()} </h1> </div> ); };
93. Erik Rasmussen – @erikras React Solid export const Result = (props) => { const expensiveResult = useMemo( () = expensiveCalculation(props.value), [props.value] ); return ( <div> <h1> The result is: {expensiveResult} </h1> </div> ); }; useMemo export const Result = (props) => { const expensiveResult = () = expensiveCalculation(props.value); return ( <div> <h1>Result: {expensiveResult()}</h1> <h1>Result: {expensiveResult()}</h1> <h1>Result: {expensiveResult()}</h1> </div> ); };
94. Erik Rasmussen – @erikras React Solid export const Result = (props) => { const expensiveResult = useMemo( () = expensiveCalculation(props.value), [props.value] ); return ( <div> <h1> The result is: {expensiveResult} </h1> </div> ); }; useMemo export const Result = (props) => { const expensiveResult = createMemo( () => expensiveCalculation(props.value) ); return ( <div> <h1>Result: {expensiveResult()}</h1> <h1>Result: {expensiveResult()}</h1> <h1>Result: {expensiveResult()}</h1> </div> ); };
95. Erik Rasmussen – @erikras React Solid export const Result = (props) => { const expensiveResult = useMemo( () = expensiveCalculation(props.value), [props.value] ); return ( <div> <h1> The result is: {expensiveResult} </h1> </div> ); }; useMemo export const Result = (props) => { const expensiveResult = createMemo( () => expensiveCalculation(props.value), [props.value] ); return ( <div> <h1>Result: {expensiveResult()}</h1> <h1>Result: {expensiveResult()}</h1> <h1>Result: {expensiveResult()}</h1> </div> ); };
96. Erik Rasmussen – @erikras React Solid export const Result = (props) => { const expensiveResult = useMemo( () = expensiveCalculation(props.value), [props.value] ); return ( <div> <h1> The result is: {expensiveResult} </h1> </div> ); }; useMemo export const Result = (props) => { const expensiveResult = createMemo( () => expensiveCalculation(props.value) ); return ( <div> <h1>Result: {expensiveResult()}</h1> <h1>Result: {expensiveResult()}</h1> <h1>Result: {expensiveResult()}</h1> </div> ); }; NO DEPENDENCY ARRAY NEEDED!!
97. Erik Rasmussen – @erikras Flow Control
98. Erik Rasmussen – @erikras <Show/>
99. Erik Rasmussen – @erikras React Solid export const LoginButton = (props) => { return ( <div> {props.loggedIn ? ( <button onClick={() = props.logout()}> Logout </button> ) : ( <button onClick={() = props.login()}> Login </button> )} </div> ); }; <Show/> export const LoginButton = (props) => { return ( <div> {props.loggedIn ? ( <button onClick={() = props.logout()}> Logout </button> ) : ( <button onClick={() = props.login()}> Login </button> )} </div> ); };
100. Erik Rasmussen – @erikras React Solid export const LoginButton = (props) => { return ( <div> {props.loggedIn ? ( <button onClick={() = props.logout()}> Logout </button> ) : ( <button onClick={() = props.login()}> Login </button> )} </div> ); }; <Show/> export const LoginButton = (props) => { return ( <div> {props.loggedIn ? ( <button onClick={() = props.logout()}> Logout </button> ) : ( <button onClick={() = props.login()}> Login </button> )} </div> ); };
101. Erik Rasmussen – @erikras React Solid export const LoginButton = (props) => { return ( <div> {props.loggedIn ? ( <button onClick={() = props.logout()}> Logout </button> ) : ( <button onClick={() = props.login()}> Login </button> )} </div> ); }; <Show/> export const LoginButton = (props) => { return ( <div> props.loggedIn <button onClick={() = props.logout()}> Logout </button> <button onClick={() = props.login()}> Login </button> </div> ); };
102. Erik Rasmussen – @erikras React Solid export const LoginButton = (props) => { return ( <div> {props.loggedIn ? ( <button onClick={() = props.logout()}> Logout </button> ) : ( <button onClick={() = props.login()}> Login </button> )} </div> ); }; <Show/> export const LoginButton = (props) => { return ( <div> <Show when={props.loggedIn}> <button onClick={() = props.logout()}> Logout </button> </Show> <button onClick={() = props.login()}> Login </button> </div> ); };
103. Erik Rasmussen – @erikras React Solid export const LoginButton = (props) => { return ( <div> {props.loggedIn ? ( <button onClick={() = props.logout()}> Logout </button> ) : ( <button onClick={() = props.login()}> Login </button> )} </div> ); }; <Show/> export const LoginButton = (props) => { return ( <div> <Show when={props.loggedIn} fallback={ <button onClick={() = props.login()}> Login </button> } > <button onClick={() = props.logout()}> Logout </button> </Show> </div> ); };
104. Erik Rasmussen – @erikras <Switch/> / <Match/>
105. Erik Rasmussen – @erikras React Solid export const Results = (props) => { return ( <div> {props.status = "pending" ? ( <Spinner /> ) : props.status = "loaded" ? ( <Items items={props.items} /> ) : ( <Error error={props.error} /> )} </div> ); }; <Switch/> / <Match/> export const Results = (props) => { return ( <div> {props.status = "pending" ? ( <Spinner /> ) : props.status = "loaded" ? ( <Items items={props.items} /> ) : ( <Error error={props.error} /> )} </div> ); };
106. Erik Rasmussen – @erikras React Solid export const Results = (props) => { return ( <div> {props.status = "pending" ? ( <Spinner /> ) : props.status = "loaded" ? ( <Items items={props.items} /> ) : ( <Error error={props.error} /> )} </div> ); }; <Switch/> / <Match/> export const Results = (props) => { return ( <div> {props.status = "pending" ? ( <Spinner /> ) : props.status = "loaded" ? ( <Items items={props.items} /> ) : ( <Error error={props.error} /> )} </div> ); };
107. Erik Rasmussen – @erikras React Solid export const Results = (props) => { return ( <div> {props.status = "pending" ? ( <Spinner /> ) : props.status = "loaded" ? ( <Items items={props.items} /> ) : ( <Error error={props.error} /> )} </div> ); }; <Switch/> / <Match/> export const Results = (props) => { return ( <div> <Switch> <Match when={props.status = "pending"}> <Spinner /> </Match> props.status === "loaded" ? ( <Items items={props.items} /> ) : ( <Error error={props.error} /> )} </Switch> </div> ); };
108. Erik Rasmussen – @erikras React Solid export const Results = (props) => { return ( <div> {props.status = "pending" ? ( <Spinner /> ) : props.status = "loaded" ? ( <Items items={props.items} /> ) : ( <Error error={props.error} /> )} </div> ); }; <Switch/> / <Match/> export const Results = (props) => { return ( <div> <Switch> <Match when={props.status = "pending"}> <Spinner /> </Match> <Match when={props.status = "loaded"}> <Items items={props.items} /> </Match> <Error error={props.error} /> )} </Switch> </div> ); };
109. Erik Rasmussen – @erikras React Solid export const Results = (props) => { return ( <div> {props.status = "pending" ? ( <Spinner /> ) : props.status = "loaded" ? ( <Items items={props.items} /> ) : ( <Error error={props.error} /> )} </div> ); }; <Switch/> / <Match/> export const Results = (props) => { return ( <div> <Switch fallback={<Error error={props.error} />}> <Match when={props.status = "pending"}> <Spinner /> </Match> <Match when={props.status = "loaded"}> <Items items={props.items} /> </Match> </Switch> </div> ); };
110. Erik Rasmussen – @erikras <For/>
111. export const ItemList = (props) => { return ( <div> {props.items.map( (item) = ( <div> {item.name} </div> ) )} </div> ); }; Erik Rasmussen – @erikras React Solid <For/> export const ItemList = (props) => { return ( <div> {props.items.map( (item) = ( <div> {item.name} </div> ) )} </div> ); };
112. export const ItemList = (props) => { return ( <div> {props.items.map( (item) = ( <div> {item.name} </div> ) )} </div> ); }; Erik Rasmussen – @erikras React Solid <For/> export const ItemList = (props) => { return ( <div> {props.items.map( (item) = ( <div> {item.name} </div> ) )} </div> ); };
113. export const ItemList = (props) => { return ( <div> {props.items.map( (item) = ( <div key={item.id}> {item.name} </div> ) )} </div> ); }; Erik Rasmussen – @erikras React Solid <For/> export const ItemList = (props) => { return ( <div> {props.items.map( (item) = ( <div> {item.name} </div> ) )} </div> ); };
114. export const ItemList = (props) => { return ( <div> {props.items.map( (item) = ( <div key={item.id}> {item.name} </div> ) )} </div> ); }; Erik Rasmussen – @erikras React Solid <For/> export const ItemList = (props) => { return ( <div> <For each={props.items}> {(item) = ( <div> {item.name} </div> )} </For> </div> ); }; NO KEY PROP NEEDED!!
115. Erik Rasmussen – @erikras <ErrorBoundary/>
116. class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, info) { logError(error, info.componentStack); } render() { if (this.state.hasError) { return this.props.fallback; } return this.props.children; } } Erik Rasmussen – @erikras React Solid <ErrorBoundary/>
117. class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, info) { logError(error, info.componentStack); } render() { if (this.state.hasError) { return this.props.fallback; } return this.props.children; } } Erik Rasmussen – @erikras React Solid <ErrorBoundary/> export const App = () => { return ( <div> <ErrorBoundary fallback={(error) = ( <PrettyError error={error} /> )} > <ComponentThatMayThrow /> </ErrorBoundary> </div> ); }; 🙄
118. Erik Rasmussen – @erikras style prop
119. Erik Rasmussen – @erikras React Solid style prop export const Text = () => { return ( <div style={{ fontWeight: "bold", margin: 15, maxHeight: "90vh", }} > Stylin'! </div> ); }; export const Text = () => { return ( <div style={{ fontWeight: "bold", margin: 15, maxHeight: "90vh", }} > Stylin'! </div> ); };
120. Erik Rasmussen – @erikras React Solid style prop export const Text = () => { return ( <div style={{ fontWeight: "bold", margin: 15, maxHeight: "90vh", }} > Stylin'! </div> ); }; export const Text = () => { return ( <div style={{ fontWeight: "bold", margin: 15, maxHeight: "90vh", }} > Stylin'! </div> ); };
121. Erik Rasmussen – @erikras React Solid style prop export const Text = () => { return ( <div style={{ fontWeight: "bold", margin: 15, maxHeight: "90vh", }} > Stylin'! </div> ); }; export const Text = () => { return ( <div style={{ "font-weight": "bold", margin: "15px", "max-height": "90vh", }} > Stylin'! </div> ); };
122. Erik Rasmussen – @erikras class prop
123. Erik Rasmussen – @erikras React Solid class prop export const Table = () => { return ( <div> <div className="row"> <div className="column">React</div> <div className="column">Awesome</div> </div> <div className="row"> <div className="column">Solid</div> <div className="column">Also Awesome</div> </div> </div> ); }; export const Table = () => { return ( <div> <div className="row"> <div className="column">React</div> <div className="column">Awesome</div> </div> <div className="row"> <div className="column">Solid</div> <div className="column">Also Awesome</div> </div> </div> ); };
124. Erik Rasmussen – @erikras React Solid class prop export const Table = () => { return ( <div> <div className="row"> <div className="column">React</div> <div className="column">Awesome</div> </div> <div className="row"> <div className="column">Solid</div> <div className="column">Also Awesome</div> </div> </div> ); }; export const Table = () => { return ( <div> <div className="row"> <div className="column">React</div> <div className="column">Awesome</div> </div> <div className="row"> <div className="column">Solid</div> <div className="column">Also Awesome</div> </div> </div> ); };
125. Erik Rasmussen – @erikras React Solid class prop export const Table = () => { return ( <div> <div className="row"> <div className="column">React</div> <div className="column">Awesome</div> </div> <div className="row"> <div className="column">Solid</div> <div className="column">Also Awesome</div> </div> </div> ); }; export const Table = () => { return ( <div> <div class="row"> <div class="column">React</div> <div class="column">Awesome</div> </div> <div class="row"> <div class="column">Solid</div> <div class="column">Also Awesome</div> </div> </div> ); };
126. Erik Rasmussen – @erikras classList prop
127. Erik Rasmussen – @erikras React Solid classList prop export const Item = (props) => { return ( <div className={`item ${ props.selected ? "selected" : "" }`} > {props.item.name} </div> ); }; 🤮
128. Erik Rasmussen – @erikras React Solid classList prop import cx from "classnames"; export const Item = (props) => { return ( <div className={cx("item", { selected: props.selected, })} > {props.item.name} </div> ); };
129. Erik Rasmussen – @erikras React Solid classList prop import cx from "classnames"; export const Item = (props) => { return ( <div className={cx("item", { selected: props.selected, })} > {props.item.name} </div> ); };
130. Erik Rasmussen – @erikras React Solid classList prop import cx from "classnames"; export const Item = (props) => { return ( <div className={cx("item", { selected: props.selected, })} > {props.item.name} </div> ); };
131. Erik Rasmussen – @erikras React Solid classList prop import cx from "classnames"; export const Item = (props) => { return ( <div className={cx("item", { selected: props.selected, })} > {props.item.name} </div> ); };
132. Erik Rasmussen – @erikras React Solid classList prop import cx from "classnames"; export const Item = (props) => { return ( <div className={cx("item", { selected: props.selected, })} > {props.item.name} </div> ); }; export const Item = (props) => { return ( <div class="item" classList={{ selected: props.selected, }} > {props.item.name} </div> ); };
133. Erik Rasmussen – @erikras React Solid classList prop export const Item = (props) => { return ( <div className={`item ${ props.selected ? "selected" : "" }`} > {props.item.name} </div> ); }; export const Item = (props) => { return ( <div class="item" classList={{ selected: props.selected, }} > {props.item.name} </div> ); }; 🤮 😎
134. Erik Rasmussen – @erikras Lifecycle Methods
135. Erik Rasmussen – @erikras React Solid Lifecycle Methods export const MyComponent = (props) => { useEffect(() => { console.log("MyComponent mounted"); return () => { console.log("MyComponent unmounted"); }; }); return <div>Hello, {props.name}!</div>; };
136. Erik Rasmussen – @erikras React Solid Lifecycle Methods export const MyComponent = (props) => { useEffect(() => { console.log("MyComponent mounted"); return () => { console.log("MyComponent unmounted"); }; }, []); return <div>Hello, {props.name}!</div>; }; 🙄
137. Erik Rasmussen – @erikras React Solid Lifecycle Methods export const MyComponent = (props) => { useEffect(() => { console.log("MyComponent mounted"); return () => { console.log("MyComponent unmounted"); }; }, []); return <div>Hello, {props.name}!</div>; }; export const MyComponent = (props) => { return <div>Hello, {props.name}!</div>; };
138. Erik Rasmussen – @erikras React Solid Lifecycle Methods export const MyComponent = (props) => { useEffect(() => { console.log("MyComponent mounted"); return () => { console.log("MyComponent unmounted"); }; }, []); return <div>Hello, {props.name}!</div>; }; export const MyComponent = (props) => { onMount(() => { console.log("MyComponent mounted"); }); return ( <div>Hello, {props.name}!</div> ); };
139. Erik Rasmussen – @erikras React Solid Lifecycle Methods export const MyComponent = (props) => { useEffect(() => { console.log("MyComponent mounted"); return () => { console.log("MyComponent unmounted"); }; }, []); return <div>Hello, {props.name}!</div>; }; export const MyComponent = (props) => { onMount(() => { console.log("MyComponent mounted"); }); onCleanup(() => { console.log("MyComponent unmounted"); }); return ( <div>Hello, {props.name}!</div> ); }; FOOTGUN #2: The component function is only called once! NO DEPENDENCY ARRAY NEEDED!!
140. Erik Rasmussen – @erikras ⚡Lightning Round⚡
141. Erik Rasmussen – @erikras • Context API with createContext() • Lazy components • Suspense • useQuery-like Resources with useResource() • immer-like mutation API with produce() • Next.js-like application framework called SolidStart • Routing, SSR, SSG, etc. Solid Familiar
142. Erik Rasmussen – @erikras • Nested Reactivity with createStore() • Batched updates with batch() • Directives with use: props • Google "solid fi nal form" Solid Less Familiar <input name="firstName" placeholder="First Name" use:field />;
143. Erik Rasmussen – @erikras Footgun Recap
144. Erik Rasmussen – @erikras Footgun Recap 1. Signal values are getter functions! 2. The Component function is called only once! 3. Only call signal getters in JSX (or other derived signals).
 Never call getter before return. 4. Never destructure props! 5. The Component function is called only once! 6. The Component function is called only once! <div>{value}</div> <div>{value()}</div> ❌ ✅
145. Erik Rasmussen – @erikras Performance
146. Erik Rasmussen – @erikras React Solid React's kryptonite is re-rendering. – Erik Rasmussen @erikras React's superpower is re-rendering.
147. Erik Rasmussen – @erikras React Solid React's kryptonite is re-rendering. – Erik Rasmussen @erikras React's superpower is re-rendering.
148. Erik Rasmussen – @erikras React Solid – Solid @solid_js What the 🤬 is "re-rendering"?
149. Erik Rasmussen – @erikras React Solid The JS Framework Benchmark compares browser performance across a wide range of tests. Lower is better.
150. Erik Rasmussen – @erikras Conclusion
151. Erik Rasmussen – @erikras Conclusion Solid vs. React
152. Erik Rasmussen @erikras https://erikras.com Thanks! <Show when={done()}> </Show>