Vercel’s Post

Vercel released a substantial update to their v0 tool. They completely redesigned the user experience, making it much more similar to Claude Artifact, which apparently opens up a new trend. On the left is the conversational chat; on the right is the preview of the generated component, with the possibility to inspect the code. To some extent, they have migrated from a design tool paradigm to a text/code editor, even though it’s not possible to edit the code directly—you have to “tell” in natural language every change you want to make. I don’t know whether it’s a technical limitation or a design decision. I hope it’s the former. Personally, I do think the future of such tools will be in the interoperability between conversational text and traditional editing capabilities. In any case, kudos to them. The quality of the generated code (even though limited to the Next/React/Tailwind stack) is impressive—very close to production-ready code. Here are some examples to play with: https://lnkd.in/dgKSHuHy

7. Memoization in JavaScript Say you have a function which calculates the square of a number, const cache = []; function square(n) { If (cache[n] != null) { return cache[n]; } else { let i = n**2; cache[n] = i; return i; } } console.log(square(10)); console.log(square(3578967)); console.log(square(3578967)); Here the time taken to compute the square of the number as big as 3578967 will take lot of huge time. To avoid this we can use the concept of memoization. Memoization is the process of caching previously computed values in JavaScript. Here in the example the previous results are saved in an array 'cache', thus reducing computing time.

Conditional rendering using && in react you can use the && logical operator to perform conditional logic in a more concise way. This is possible because you want to check if a condition is true, and if it is, return some markup. Here's an example: {condition && <p>markup</p>} If the condition is true, the markup will be returned. If the condition is false, the operation will immediately return false after evaluating the condition and return nothing. You can include these statements directly in your JSX and string multiple conditions together by writing && after each one. This allows you to handle more complex conditional logic in your render() method without repeating a lot of code.

1000checkboxes [dot] xyz tech stack: * Frontend: SSR HTML/X via F# + Giraffe.ViewEngine * Backend: F# + Giraffe * DB: None - in memory * Hosting: Serverless Containers on Railway #fsharp #htmx

Yesterday, I was getting infinite loops in a useEffect in a child component in react , this is what the use effect looked like import React from 'react'; function MyComponent({ array1, array2, isMounted }) {  const mappedArray1 = array1.map((item) => {   return item * 2; // Example: Double each item  });  const mappedArray2 = array2.map((item) => {   return item + 1; // Example: Increment each item  });  useEffect(() => {       // Do something here   }  }, [mappedArray1, mappedArray2, isMounted]);  return (   // ... component JSX  ); } When this component was being rendered, there were infinite loops happening, I tried putting a useMemo over the mappedArrays and it stopped rendering altogether. Finally, the solution? It was to put a JSON.stringify over the two mappedArrays in the dependency of the use effect. #react

https://lnkd.in/dwjmGvac 😅 Got to say that I fell from the sky going through these useCases. I thought I knew a lot about #react and it’s internals, but I was missing some very basic stuff 🫣. 💡Using a “key” prop as implicit state-reset is brilliant and will simplify my code immensely. #react #useEffect #components #learning

#reactjs Avoid using an array index as key prop, prefer a stable ID. You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs. Each such item should have a permanent and unique property. Ideally, it should be assigned when the item is created. Similarly, do not generate keys on the fly, e.g. with key={Math.random()}. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list of items. Instead, use a stable ID based on the data. . . .

I have really enjoyed diving in and learning React. It's speed, component based architecture, and vast libraries of features are truly incredible. Conceptually grasping the material was relatively simple following a deep dive on raw JS fundamentals, but I have struggled to execute some of these concepts with code. One being controlled forms. To improve on this I built a small application and documented the steps in the blog linked below. Forcing myself to go through and verbalize each step established the muscle memory that will allow me to reporoduce on subsequent projects. #codingjourney #react #reactjs #lifelonglearning https://lnkd.in/gQ_aGSp2

Please review an alternative to React/Solid I have been developing. While it shares some concepts with React/Solid, it distinguishes itself by adopting a more flexible and minimalist approach in my opinion. Essentially, the complexity of hooks, lifecycle, and concurrency is replaced by fine-grained DOM update control. https://lnkd.in/ddV_A9dk What do you think about this approach? Please share it with anyone who might be interested. #fusor #fusorjs #react #reactjs #solid #solidjs

You Might Not Need an Effect !! Effects are an escape hatch from the React paradigm. They let you “step outside” of React and synchronize your components with some external system like a non-React widget, network, or the browser DOM. If there is no external system involved (for example, if you want to update a component’s state when some props or state change), you shouldn’t need an Effect. Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone. Learn more : https://lnkd.in/d-dJWCbu