Forem: bilalthepunjabi

👨‍💻 Why React Devs Are So Annoyed By Hooks 😠

bilalthepunjabi — Fri, 31 Mar 2023 21:13:46 +0000

If you're a React developer, you've probably heard of Hooks. They were introduced in React 16.8 and are a way to use state and other React features without writing a class. Sounds great, right? Well, some developers have been less than thrilled with Hooks, and here's why.

🤔 The Learning Curve

For starters, Hooks have a bit of a learning curve. Developers who have been working with class components for a long time might find it hard to switch to functional components with Hooks. Plus, there are a lot of Hooks to learn: useState, useEffect, useContext, useRef, useCallback...the list goes on. It can be overwhelming!

😠 The Breaking Changes

Another reason why some React developers are annoyed with Hooks is that they can break existing code. For example, if you were using a class component and then switched to a functional component with Hooks, you might have to change your code quite a bit to get it to work. And if you're working on a large codebase, that can be a real headache.

👀 The Messy Code

Hooks can also lead to messy code if you're not careful. Because Hooks can be used multiple times within a component, it's easy to end up with a lot of stateful variables and effect calls. And if you're not careful with your naming and organization, your code can quickly become a mess.

🧐 The Debugging Challenge

Debugging can also be a challenge with Hooks. Since Hooks are just functions, you can't set breakpoints inside them like you can with class components. This can make it more difficult to figure out what's going on when things go wrong.

🤖 The Solution

So, what's the solution? Well, it's not to abandon Hooks altogether. They can be a powerful tool for React developers, and they're not going anywhere. Instead, the key is to use them responsibly and be aware of their potential downsides.

👨‍💻 Here's an example of using the useState Hook:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

🤖 And there you have it! A brief overview of why some React developers are annoyed by Hooks. Just remember, as with any tool, use them wisely and with caution. And always be ready to adapt and learn new things! 😎

Typescript gives hard time to vue'ds

bilalthepunjabi — Fri, 31 Mar 2023 21:08:58 +0000

👋 Hey there! Are you a Vue.js developer struggling with TypeScript? Well, you're not alone my friend! 😂 It's no secret that TypeScript can give Vue a hard time with its strict typing rules, but fear not, there are ways to make it work seamlessly.

💡 First off, make sure to take advantage of Vue's built-in TypeScript support. This will give you access to all the type information you need to make your app a success. But let's be honest, sometimes it's just not that simple. 😩

👨‍💻 One common problem that Vue developers face with TypeScript is the infamous "Property 'x' does not exist on type 'y'" error. You know the one I'm talking about! 😅 But don't worry, there are workarounds for this, such as using the any type or casting your variables to the correct type.

💻 Another issue you might run into is with Vue's .vue files. TypeScript doesn't play well with them out of the box, but fear not my friends, there are tools like Vetur and Volar that can help you out. 🙌

🤖 And if all else fails, don't be afraid to reach out to the friendly Vue and TypeScript communities for help. They're always willing to lend a hand and share their experiences. 😊

So there you have it, TypeScript might give Vue a hard time, but with a little bit of effort and some helpful tools, you can make it work seamlessly. Keep on coding, my friends! 👨‍💻

Laravel Custom Blade Directive

bilalthepunjabi — Tue, 31 May 2022 14:01:54 +0000

Hi there folks,

Today, I would like to talk about the laravel custom blade directives. You would have probably seen @if, @endif which are called directives.

In this post, I would help you to create your own directives and their limitations and use-cases that will eventually help you to make your application developments much easier.

We will got through the example directive here. First create a provider with artisan.

php artisan make:provider BladeServiceProvider

The path will be app/Providers/BladeServiceProvider

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;

class BladeServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

@print(object)

In the boot function of the provider we have just created.

Blade::directive('print', function ($payload) {
     return "<?php 
       echo'<pre>';
       print_r($payload);
       echo'</pre>'; 
     ?>";
});

We can then use this directive as @print($any_object_or_array) in any blade template.
If this directive don't work or display then the issue lies with the cache. You have to purge the view cache or you can run php artisan optimize:clear to purge all cache of any type.

This is just minimal implementation and use-case of blade-directives.

Limitations & Issues

The main issue you will encounter with the results of this custom-directive is of cache. If you don't make these to be dynamic in-nature. Then laravel cache engine nullified your generic-behaviour of your directive.

Blade::directive('{name}', function () { return 'string_expression'})

{string_expression} is an expression in string form like
"<?php ehco('Hello World'); ?>".

But if you passed something un-proccessed form of code like using another directive or laravel blade-view injection like
return view('blade',compact($var));.
It conflict with the cache-engine of laravel.

If you want to render the some blade template on using your directive you can code something like
return "<?php echo view('blade',compact('$model'))->render(); ?>";.

If you have any query or problem that you wanna share then just ping @bilalthepunjabi in discussions.