{/* Notice the usage of count! It is a function*/}

Count: {count()}

); } `)),mdx(BookmarkCard,{url:"https://www.cbsofyalioglu.com/blogging/best-blogging-sites/",image:"/posts/best-blogging.webp",title:"The List of Best Blogging Platforms",description:"The list of best blogging platforms for your creative works. The list includes free and paid platforms.",mdxType:"BookmarkCard"}),mdx("h4",null,"1) Component State Access and Update"),mdx("p",null,"SolidJS call the state elements as signals. However, I prefer to use state rather than signal. Let's make a Counter component within the App component. Fill the ",mdx("inlineCode",{parentName:"p"},"App.jsx")," file as follows:"),mdx("p",null,mdx("img",e({parentName:"p"},{src:"/posts/solidjs/SolidJS-component-state-change.webp",alt:"SolidJS change state"}))),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"}),`import logo from "./logo.svg"; import styles from "./App.module.css"; import { createSignal } from "solid-js"; function App() { /** * CHECKPOINT * if the App component renders * it will print to console */ // console.log("App component rendered."); return (

); } function Counter(props) { const [count, setCount] = createSignal(props.initial || 0); /** * CHECKPOINT * if the Counter component renders. it will print to console. * Also, I put another print statement for the count function. */ // console.log("Counter component rendered."); console.log("Counter component count value: ", count()); return (

{/* Notice the usage of count! It is a function*/}

Count: {count()}

); } export default App; `)),mdx("p",null,`Let's check the browser and the first render of SolidJS. As you see, there is no extra component render. If it were React, we should have seen many times "Counter component rendered" text on the console.`),mdx("p",null,mdx("img",e({parentName:"p"},{src:"/posts/solidjs-reactivity.gif",alt:"SolidJS's Reactivity"}))),mdx("h4",null,"2) Parent Component State Access and Update"),mdx("p",null,"Let's make it further and pass the signal setter to the child component and use it from there. Change both App and Counter components like that:"),mdx("p",null,mdx("img",e({parentName:"p"},{src:"/posts/solidjs/solidjs-changing-state-of-the-parent-component.webp",alt:"SolidJS change parent state"}))),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"}),`function App() { /** * CHECKPOINT * if the App component renders * it will print to console */ // const [appCount, setAppCount] = createSignal(0); console.log("App: count: ", appCount()); console.log("App component rendered."); return (

); } function Counter({ initial, setAppCount }) { const [count, setCount] = createSignal(initial || 0); /** * CHECKPOINT * if the Counter component renders. it will print to console. * Also, I put another print statement for the count function. */ // console.log("Counter component rendered."); console.log("Counter component count value: ", count()); return (

{/* Notice the usage of count! It is a function*/}

Count: {count()}

{/* Buttons changes the signal value of its parent component */}

); } `)),mdx("p",null,"As you see, there is not any component re-render. It's awesome.\u{1F973}"),mdx("p",null,mdx("img",e({parentName:"p"},{src:"/posts/solidjs/solidjs-change-state-of-parent-component.gif",alt:"SolidJS parent component state"}))),mdx("h4",null,"Don't use destructuring, if you need reactive props"),mdx("p",null,"One thing to keep in mind is that if you need a reactive prop, you shouldn't use destructuring."),mdx("p",null,"The example below is obtained from the official documentation. (",mdx("a",e({parentName:"p"},{href:"https://www.solidjs.com/guide#props"}),"See the details"),")"),mdx("pre",null,mdx("code",e({parentName:"pre"},{}),"// Here, `props.name` will update like you'd expect\nconst MyComponent = (props) =>

{props.name}

;\n\n// This is bad\n// Here, `props.name` will not update (i.e. is not reactive) as it is destructured into `name`\nconst MyComponent = ({ name }) =>

{name}

;\n")),mdx("h3",null,"B) Reactive primitives: createEffect"),mdx("p",null,"As you supposed, ",mdx("inlineCode",{parentName:"p"},"createEffect")," is the equivalent of the ",mdx("inlineCode",{parentName:"p"},"useEffect")," hook of React. The official explanation and example are as follows:"),mdx("p",null,"Creates a new computation that automatically tracks dependencies and runs after each render where a dependency has changed. Ideal for using\xA0",mdx("inlineCode",{parentName:"p"},"ref"),"s and managing other side effects."),mdx("pre",null,mdx("code",e({parentName:"pre"},{}),`const [a, setA] = createSignal(initialValue); // effect that depends on signal \`a\` createEffect(() => doSideEffect(a())); `)),mdx("p",null,"It's time to play with this function. The official example returns a function (doSideEffect) that takes state value as its argument. Even if the returning function doesn't take the state value as its argument but as an inner value, the ",mdx("inlineCode",{parentName:"p"},"createEffect")," function successfully makes a side-effect."),mdx("p",null,"Let's add those to the ",mdx("inlineCode",{parentName:"p"},"App")," component."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"})," // The function creates side-effect\n const changeTitle = (val) => (window.document.title = `#App: ${val}`);\n\n // effect that depends on signal `a`\n createEffect(() => changeTitle(appCount()));\n")),mdx("p",null,"We created a function (changeTitle) responsible for the side-effect. It takes a value and changes the document title according to that. It also takes the state value of the App component which is appCount. Your app component should look like this."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"}),`function App() { const [appCount, setAppCount] = createSignal(0); console.log("App: count: ", appCount()); console.log("App component rendered."); // The function creates side-effect const changeTitle = (val) => (window.document.title = \`#App: \${val}\`); // effect that depends on signal \`a\` createEffect(() => changeTitle(appCount())); return (

); } `)),mdx("p",null,"You'll easily differentiate that when the app renders the first time, the document title was ",mdx("inlineCode",{parentName:"p"},"App: 0")),mdx("p",null,"After, when I clicked and increased the appCount value, the document title also changed to the corresponding value. You'll also notice that there will be no component re-render."),mdx("p",null,mdx("img",e({parentName:"p"},{src:"/posts/solidjs/solidjs-create-effect.gif",alt:"SolidJS createEffect"}))),mdx("h3",null,"C) Reactive primitives: createMemo"),mdx("p",null,"This reactive primitive returns a function that returns a read-only derived signal. Its value is recalculated whenever the dependencies are updated. ",mdx("inlineCode",{parentName:"p"},"createMemo")," primitive is the equivalent of ",mdx("inlineCode",{parentName:"p"},"useMemo")," hook."),mdx("p",null,"Edt the App component according to those:"),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"}),` // Add those to the App component // It recalculate the value whenever the dependencies are updates. const makeDouble = (val) => val * 2 const doubleCount = createMemo(() => makeDouble(appCount())) console.log("doubleCount ", doubleCount()); `)),mdx("p",null,"Also, update the content of the App component. By doing this, we can see the ",mdx("inlineCode",{parentName:"p"},"doubleCount")," signal in work. You can also check the code location from the image below."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"}),`

Double Count: {doubleCount()}

`)),mdx("p",null,mdx("img",e({parentName:"p"},{src:"/posts/solidjs/solidjs-creatememo.gif",alt:"SolidJS createMemo function "}))),mdx("h3",null,"D) Reactive primitives: createResource"),mdx("p",null,"This function creates a signal that is responsible for async requests. The official explanation and example are here:"),mdx("p",null,"Creates a signal that can manage async requests. The\xA0",mdx("inlineCode",{parentName:"p"},"fetcher"),"\xA0is an async function that accepts the return value of the\xA0source\xA0if provided and returns a Promise whose resolved value is set in the resource. The fetcher is not reactive so use the optional first argument if you want it to run more than once. If the source resolves to false, null, or undefined will not fetch. Also, ",mdx("inlineCode",{parentName:"p"},"loading"),"\xA0and\xA0",mdx("inlineCode",{parentName:"p"},"error"),"\xA0are reactive getters and can be tracked."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"}),`const [data, { mutate, refetch }] = createResource(getQuery, fetchData); // read value data(); // check if loading data.loading; // check if errored data.error; // directly set value without creating promise mutate(optimisticValue); // refetch last request just because refetch(); `)),mdx("p",null,"My first impressions about SolidJS are amazing. Up to this point, there is no overhead that you always face with React. I will be watching the development of SolidJS with interest."),mdx("p",null,"Next, I'll review ",mdx("a",e({parentName:"p"},{href:"https://www.cbsofyalioglu.com/code/styling-and-control-flow-in-solidj/"}),"Styling and Control Flow in SolidJS"),"."))}MDXContent.isMDXComponent=!0;

Count: {count()}

Count: {count()}

App Count: {appCount()}

Count: {count()}

App Count: {appCount()}

Double Count: {doubleCount()}