Discover and read the best of Twitter Threads about #ReactJS

Most recents (24)

Let's talk about `useDeferredValue` hook from #reactjs 18.

In some cases it could replace `debounce` func.

It lets you defer updating a part of the UI.

Small 🧵
During the initial render, the returned deferred value will be the same as the value you provided.

During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in background with the new value.
The values you pass to it should either be primitive values (strings, numbers) or objects created outside of rendering.

If you create a new object during rendering and immediately pass it to useDeferredValue, it will be different on every render, causing unnecessary re-renders.
Read 7 tweets
Last Saturday, we released:
“Start Building on @MultiversX - The Rust Language”

- a series of Resources designed for 🦀Rust @rustlang #developers as a quick reference library

- a guide for newcomers willing to build #smartcontracts on #MultiversX…

Today we continue the series with materials for @reactjs - a #JavaScript library for building user interfaces & #dApps

The @MultiversX Team created an SDK dedicated to @reactjs - the sdk-dapp - a library that holds #MvX #dApp core functional logic:…

All materials are available here:…

If you have your own #reactjs tutorials and you think they worth sharing with the #MultiversXBuilders #community, please post them below👇 and will be added to this resource.

Let's learn and build together!⚡️🛠️

Read 3 tweets
Generator function* in JavaScript:

A thread 🧵

#100DaysOfCode #javascript #Angular #reactjs #devbubble
In JavaScript, generator functions are a special type of function that allows you to use the yield keyword to pause and resume the execution of the function.

#100DaysOfCode #NodeJS #CodeLife
They allow you to create iterators, which are objects that can be used to iterate over a sequence of values.

A generator function is defined using the function* keyword and can be invoked using the yield keyword.

#100daysofcodechallenge #NodeJS #reactjs
Read 9 tweets
Memoization: Using Proxy in JavaScript

#100DaysOfCode #javascript #rarely_used #devbubble
Memoization is a technique used to optimize the performance of a function by caching its results for a given set of inputs.

#100DaysOfCode #reactjs #Angular #NodeJS
The idea is that if a function is called multiple times with the same input, it's more efficient to return the cached result instead of re-computing the result each time.

#100daysofcodingchallenge #reactjs #Angular #NodeJS
Read 9 tweets
Data virtualization: With Proxies in JavaScript.

A thread 🧵

#100DaysOfCode #javascript #rarely_used #devbubble
Data virtualization using Proxies in JavaScript refers to the ability to create virtualized data structures, such as virtualized arrays, that load their data on demand rather than loading all data at once.

#100DaysOfCode #ReactJS #Angular
This can be useful for improving the performance of an application when working with large data sets.

In this Eg., we create a VirtualArray class that takes in two args- the length of the array & a loader function.

#100DaysOfCode #javascript #NodeJS #ReactJs #Angular #devbubble Proxy - VirtualArray in JS
Read 8 tweets
WeakMap in JavaScript

A thread 🧵

#100DaysOfCode #javascript #rarely_used
A WeakMap is a map that holds weak references to its keys.

This means that the keys are eligible for garbage collection if there are no other references to them.

This feature can be useful for implementing caches or other similar data structures.

#reactjs #Angular #NodeJS #js
A WeakMap is a special kind of map where keys must be objects and the map doesn't prevent garbage collection of its keys.

You can think of a WeakMap as a map that doesn't "own" its keys, and therefore doesn't keep them alive.

#100daysofcodechallenge #100DaysOfCode
Read 9 tweets
👋Are you interested in #dataviz?

⭐️I created 8 free online projects on the topic!😀

Please let me introduce them:

🧵.. A classification of chart types based on input data format
Everything started with the R graph gallery:

A collection of hundreds of graphs made with #rstats, always with explanation and code. (often using ggplot2)
Since it worked well, I created the equivalent for all my #pythonprogramming friends!

@matplotlib and Seaborn are very good tool too!
Read 10 tweets
Frontend Development #interview checklist and Roadmap for 2023

#javascript #reactjs #webdevelopment #FrontEndDeveloper

Thread 🧵👇 Image
Read 7 tweets
Conditional rendering with useEffect()
I once had this footer navbar that needs to be hidden on some pages and visible on others, one way to solve this was to play with z-index and render the new page over the navbar, but that just didn't feel right.
So useEffect(), here's how:
In the App component (common parent of Navbar and NavbarHiddenPage) I manage a state toggleNavbarVisibility, as a prop I pass value of state to Navbar, and likewise the setVisibility function to NavbarHiddenPage.

In the Navbar component I add styles based on the visibility state
And in the NavbarHiddenPage, I call useEffect() and in there I set the visibility to false, here's the trick, the function useEffect takes returns a clean up function, the set visibility to true happens here.

//useEffect return func
() => {setVisibility(true)}

Happy hacking
Read 5 tweets
1. Math and Statistics
Intro to Statistics - Udacity

Statistics - Udacity

Statistical Learning - Stanford University
2. Excel
Introduction to MS Excel - Simplilearn

Microsoft Excel: Online Tutorial for Beginners - Chandoo

Microsoft Excel Tutorial for Beginners - Free Code Camp
Read 7 tweets
How can I make my skills make me money as fast as possible?

My Skills:
- Building web sites with WordPress(very experienced with this)
- Building frontend UI with html, CSS, JavaScript, and Reactjs(confident about this)
- Building backend with Django, Nodejs, and Graphql(not
too confident about this but I always get it done)
- building mobile apps with react native(I have tried my hands on this but I am no where good at it)
- I also do white board animations.

I look forward to your advices and suggestions. Thank you.
Read 3 tweets
1/ A software engineer is a solution provider not only someone who writes code or helps to get code written.
#softwareEngineering #webDevelopment #code #softwareEngineer #solution #value #business 101 software engineering realities you must be aware of (esp
2/ Code is one of the ways to reach a solution, not the only way.
All the points at:…
#code #noCode
3/ Solutions have value, mainly in terms of money earned or money saved. So the software you write is a path to saving money or earning more money for the business.
#businesValue #value #soluiton #softwareEngineering #webDevelopment
Read 101 tweets
Best way to start a #ReactJS project.
A Thread 🧵
Typical way of creating a react application will be
`npx create-react-app myapp`
Right ? But you know what with this simple command. You almost install more than thousand node modules.
Gladly this is not the only way to create a react app.
Alternately you can create it by installing only required module one by one but that is time consuming and tedious process for starters and some may recommend that way but there is a life saver @vite_js
Read 7 tweets
Create table student_score(
student_id int,
student_name varchar2(100),
Math int,
Social int,
science int,
English int,
Hindi int);
insert into student_score values(1,'Ajay',80,90,78,66,95);
insert into student_score values(2,'Aman',95,97,82,77,96);
insert into student_score values(3,'Bijoy',82,90,78,66,95);
insert into student_score values(4,'Kumar',80,90,78,98,95);
Read 4 tweets
Scribe How

Screen recording extension that turns any process into a guide instantly.

Perfect for: founders, creators, entrepreneurs, educators, and more.

Reduce the time you spend documenting and sharing processes by 93%

🔗 Image

Pitch is uncompromisingly good presentation software, enabling modern teams to craft and distribute beautiful presentations more effectively.

Deliver your next deck faster with our free presentation templates.

🔗 Image
Read 12 tweets
5 Websites to Boost Your Frontend Development Skills 🔍

A Thread 🧵👇
1. Frontend Mentor
2. CSSBattle
Read 10 tweets
6 core elements of every bundler

Content Creator: @jerry__chang

#webdevelopment #frontenddev #javascript #Reactjs #vuejs #nextjs #remix


Bundling isn’t really a new concept.

Many folks have been doing it since Browserify.

These bundlers offer:

1. Bundling system
2. Options for the ability to optimize and other build time modifications

Here are common elements shared between all the different bundlers.
Read 12 tweets
GM UltiBettors!😀

We have some great news to share with you today! 🎊🎉

The Audit Report by @GuardianAudits is finally done and available on our Github with a low-risk security score! ✅

You can freely read/download the full report at:…

What's next?👇
Since the beginning of UltiBets, the safety of our users funds is the absolute priority, hence why the audit took longer than expected, as it was needed to fix some bugs/vulnerabilities (that's what are audits made for after all right?😉)
As a Prediction Market protocol, the overall contract logic is widely different from the traditional DeFi contracts.

We actually passed 2 audits with @GuardianAudits as they notified us that some technical challenges could appear, notably the automatic payout.
Read 13 tweets
Hace 10 meses luchamos por conseguir 100 alumnos con los que empezar el proyecto…

¡Hoy podemos gritar orgullosos que ya sois más de 50.000 los que habéis elegido #Openbootcamp para formaros y construir vuestro futuro como Desarrolladores!
Venís de todo el mundo a aprender con Martín, Víctor, Gorka, Juanjo… A ver los streams (y a veces incluso escuchar!) con Álex y Víctor… A compartir los hilos de Fabio… A escuchar los podcast de Marquino… ¡Tanta gente guay no cabíais en un solo país!
#HTML, #CSS, #Java, #Python, #Javascript, #ReactJS… Son algunos de los cursos que más os gustan… ¡Pero tenemos muchos más… Y NO ES NADA COMPARADO CON LO QUE ESTÁ POR VENIR!
Read 4 tweets
From today I'm starting posting contents related to Web Development and Computer Science in general. Hope you'll like it and share it.
#javascript #webdeveloper Image
Global Execution Context
#javascript #webdevelopment Image
Read 54 tweets
Para crear una librería de components en #reactjs siempre te recomiendan:

1. Empezar de cero 🤢
2. Usar una librería y cambiar los estilos 😢

Hay una tercera y MEJOR opción:

✨ Componentes primitivos ✨

❤️ ¿Me ayudas con un RT?

Los components primitivos son accesibles y sin estilo para construir #DesignSystems y #webapps de alta calidad.

Proporcionan todas las bases necesarias para que desarrolles tus propios components con el diseño que quieras rápidamente.

Empieza lista...
Reach UI busca convertirse en la base accesible de tu #DesignSystem basado en React.
Read 8 tweets
the React Summit MEGATHREAD

For people who missed what happened in the #ReactJS world last week, from a #reactnative developer perspective
Welcome aboard, grab your badge
Read 16 tweets
Let's talk about creating our own Custom Hook in React!🪝🪝

#100DaysOfCode #html #ReactJS
Hooks were introduced in React 16. Hooks allow us to manipulate state in Functional components. "useState()", "useEffect()", "useMemo()" are some of the hooks in React.
But above this React allows us to create our own custom hook. You can create your own hook and use it across your application.
Read 4 tweets

Related hashtags

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!