DEV Community: Zakaria EL AISSAOUI

JavaScript Closures

Zakaria EL AISSAOUI — Mon, 23 Jan 2023 17:16:39 +0000

JavaScript function closures are a powerful feature that allows you to create private variables and methods within a function.

This can be useful for encapsulating logic, data, and behavior, and preventing them from being accessed or modified by external code.

A closure is created when a function is defined inside another function. The inner function has access to the variables and parameters of the outer function, even after the outer function has returned.

Here is an example of a closure in JavaScript:

In this example, the outerFunction takes a single parameter x and assigns it to a variable privateVariable. It then returns the innerFunction, which has access to privateVariable and can return its value.

When we call outerFunction(10), it returns the innerFunction with privateVariable set to 10. We assign the returned function to a variable closure. Then we call the closure function which will give us the output 10.

Closures can also be used to create private methods. For example:

In this example, increment and getValue are private methods that can only be accessed via the returned object. This allows you to hide implementation details and control how the data and methods are used.

Closures are a powerful feature in JavaScript, and are often used in object-oriented programming, functional programming, and other design patterns.

They allow you to create encapsulated and reusable code, and can help to improve the structure and maintainability of your application.

𝗔𝗯𝗼𝗿𝘁𝗶𝗻𝗴 𝗼𝗻𝗴𝗼𝗶𝗻𝗴 𝗮𝗰𝘁𝗶𝘃𝗶𝘁𝗶𝗲𝘀 𝘂𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿 𝗶𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲.

Zakaria EL AISSAOUI — Mon, 23 Jan 2023 13:12:58 +0000

𝗔𝗯𝗼𝗿𝘁𝗶𝗻𝗴 𝗼𝗻𝗴𝗼𝗶𝗻𝗴 𝗮𝗰𝘁𝗶𝘃𝗶𝘁𝗶𝗲𝘀 𝘂𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿 𝗶𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲.

The AbortSignal interface represents a signal object that allows you to communicate with a DOM request (such as a fetch request) and abort it if required via an AbortController object.

𝗔. 𝗔𝘀𝘆𝗻𝗰 𝘄𝗼𝗿𝗸 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁:
Let's take the example of data fetching placed inside a useEffect hook.
If this effect doesn't finish before it's fired again (re-render), we may have two requests running in parallel.
To make things better, we can create an AbortController instance that will be aborted whenever the next effect runs.
𝘞𝘩𝘦𝘯 𝘢𝘣𝘰𝘳𝘵() 𝘪𝘴 𝘤𝘢𝘭𝘭𝘦𝘥, 𝘵𝘩𝘦 𝘧𝘦𝘵𝘤𝘩() 𝘱𝘳𝘰𝘮𝘪𝘴𝘦 𝘳𝘦𝘫𝘦𝘤𝘵𝘴 𝘸𝘪𝘵𝘩 𝘋𝘖𝘔𝘌𝘹𝘤𝘦𝘱𝘵𝘪𝘰𝘯 𝘯𝘢𝘮𝘦𝘥 𝘈𝘣𝘰𝘳𝘵𝘌𝘳𝘳𝘰𝘳.

𝗕. 𝗥𝗲𝗺𝗼𝘃𝗶𝗻𝗴 𝗘𝘃𝗲𝗻𝘁 𝗛𝗮𝗻𝗱𝗹𝗲𝗿𝘀:
To remove an event handler, you have to keep hold of the original reference.
Using AbortSignal, you can get the signal to remove it for you.

Promise-based APIs wishing to support aborting can accept an AbortSignal object, and use its state to determine how to proceed (https://bit.ly/3HB3hjQ).

React's Fiber Reconciliation Algorithm

Zakaria EL AISSAOUI — Mon, 23 Jan 2023 13:05:05 +0000

Fiber is the name given to the new reconciliation algorithm introduced in React 16.

It was a major rewrite of React's core algorithm, and it was designed to improve the performance of the library, especially when dealing with large lists of elements or complex user interactions.

The main concept behind Fiber is the ability to split the work of reconciliation into smaller chunks, which can be spread out over multiple frames. This allows React to better utilize the browser's main thread, and also to more efficiently manage and prioritize the different updates that need to be made to the UI.

Fiber also introduced new concepts such as "priority" and "expiration times" that allow React to control the order and timing of updates, so that critical updates can be processed first and less critical updates can be delayed or batched together to improve performance.

Fiber also introduced the concept of "Suspense" which allows developers to write code that can "suspend" the rendering of a component until certain data is available, this improves the user experience in case of slow network, by showing loading spinner or fallback content.

Overall, the Fiber algorithm provides a more efficient and flexible way for React to update the UI and should lead to better performance and a more responsive user experience.

JavaScript: First-class Functions

Zakaria EL AISSAOUI — Thu, 19 Jan 2023 16:25:42 +0000

Javascript is a programming language that allows functions to be treated as variables, known as First-class functions. This means that a function can be passed as an argument to other functions, returned by another function, and assigned as a value to a variable.

Passing a function as an argument

One example of passing a function as an argument is seen in the function executeOperation, which takes in a handler function, and a and b as arguments. The handler function (in this case sum) is then executed with a and b as its arguments and the result is logged.

Returning a function

Another example is seen in the function addToValue, which returns a new function that takes in another value and adds it to the original value passed in. This returned function is then assigned to a variable addTo3 and can be called with a new value.

Assigning a function to a variable

Lastly, a function can also be assigned to a variable as seen in the example of predicate, which takes in a value and returns a boolean based on whether the value is equal to 3.

It's worth noting that functions that take other functions as arguments or return functions are known as higher-order functions.

React: best practices and design patterns

Zakaria EL AISSAOUI — Thu, 19 Jan 2023 15:25:20 +0000

React is a popular JavaScript library for building user interfaces, and it's become one of the most widely-used tools for building web and mobile apps.

However, building a large, complex React application can be challenging, especially when it comes to architecture.
There are a number of best practices and design patterns that can help to ensure that your code is maintainable, scalable, and easy to understand.

In this article, we'll take a look at some of the key considerations for building a well-architected React application.

Use a component-based architecture: React is built around the idea of reusable components, and using a component-based architecture is a natural fit for building React applications. This architecture makes it easy to create reusable, modular code that can be easily tested and maintained.
Use a state management library: Managing state can be one of the most challenging aspects of building a React application. Using a state management library like Redux or MobX can help to simplify state management and make it easier to keep your application state consistent and predictable.
Divide your application into smaller modules: Dividing your application into smaller modules makes it easier to maintain and scale. By breaking your application into smaller, self-contained modules, you can make it easier to test, debug, and refactor your code.
Use a routing library: A routing library like React Router can help to manage the different routes within your application. This can make it easier to navigate between different sections of your application and make it more user-friendly.
Use a style library: A style library like Styled Components can help to make your application more consistent and maintainable. By using a style library, you can create reusable styles that can be easily shared across different components in your application.
Use a linter: A linter can help to enforce best practices for coding style and avoid common mistakes. This can make your code more readable and maintainable.
Test your application: Writing tests for your application can help to ensure that it's working correctly and make it easier to catch bugs and errors.
Monitor your application's performance: Monitoring your application's performance can help to identify any issues that may be causing it to slow down. This can help you to make performance improvements and keep your application running smoothly.

By following these best practices and design patterns, you'll be well on your way.