16
46 Comments

I just learned React Hooks and now I'm the happiest dev on the planet! 🌎

A couple days ago I posted about a simple CRM tool I made after learning React basics in 24 hours.

I got lot's of useful feedback. Mike Cavaliere told me about this thing called React Hooks. At the time, I was somewhat familiar with the term but didn't know what was so great about it.

Anywho, this morning I took the time to learn the basics of useEffect and useState and I am literally the happiest developer on the planet. 😎

Happy picture

Why am I so happy? 😁

It's simple.

The workflow to create components is much smooth and neat. Also much easier than using class components instead.

I'm thinking of improving my current set of skills and then will start to learn Redux and Styled Components.


I would love if any of you have feedback on what I should fix/learn next. The Github repository is below if you want to take a peak at the code. 😉

👉 https://github.com/BraydenTW/simple-react-crm


This has also been posted on Dev.to. You can view it here

  1. 6

    Your app isn’t complicated enough to be using Redux yet. Why not add more features that you think are cool? Once a react app starts getting more complex then you should consider a state management tool.

    What is your goal with learning react? Do you want to build a saas app? Any particular ideas in mind?

    Here are some things you could work on next:

    • Make your ui more advanced, add more features
    • learn routing with react router (most apps have multiple routes/pages)
    • connect to a backend dB (I use Firebase but I’m sure netlify has dB services too)
    1. 1

      I think that’s a good point. I was thinking of learning Redux, but not to use on my current app.

      I think I’ll try some more optimization, add more options, and then add a backend with Firebase and “Authenticate with Google”.

      1. 1

        Don't get me wrong, I love Redux (especially with Redux Toolkit), so if you want to learn it, I don't want to stop you. But I really don't think you need it yet. I'm a fan of learning things when you need them.

        See: https://redux.js.org/faq/general#when-should-i-learn-redux

        Redux solves the following problems:

        1. Managing large and complex state across lots of components
        2. Prevents prop drilling and excessive hoisting of state
        3. Helps organize and separate complex business logic from components (particularly lots of actions, and async actions with Redux Thunk)
        4. Robust tools for testing, logging, debugging, state time-travel

        If you have 2 or more of these problems, then I think you want to consider a state management tool like Redux. If you only have problem #2 and no others, then React Context is probably good enough.

        Couple other thoughts:

        1. I love Firebase Firestore and it is easy to get started. But one thing that surprised me is how different and challenging it is to deal with the limitations and security rules of a nosql database. I'm still glad I'm using it, nosql architecture is just more difficult than I thought. Firebase Auth is dead-simple though, and I highly recommend that. And so far I've been very pleased with Firebase Hosting.
        2. In my opinion, I think learning a CSS framework is a good use of your time, particularly if/when your app gets large, custom CSS is a nightmare to manage (at least for me). I personally love Bootstrap, but lots of other people like Tailwind if you prefer lower-level utility classes rather than pre-built components.

        Hope this helps and good luck!

        1. 1

          Yeah I understand. I might learn it later when I have those issues.

          I am thinking of learning Tailwind just because of how trending it is now a days.

          Thanks for the tips!

          1. 1

            Its trending for a reason though. It basically replaced css completely and makes for a much quicker workflow. If there was a plugin collapse all styling classes or autosort them in some way to clean up the resulting html mess, it would be sick

            1. 1

              Yep, I started learning it a couple hours ago and it's pretty cool :D

    2. 1

      In your addcustomer component I would recommend keeping form data in local component state via useState. Don’t use document.getElement

      See: controlled components
      https://dev.to/stanleyjovel/simplify-controlled-components-with-react-hooks-23nn
      https://reactjs.org/docs/forms.html#controlled-components

  2. 3

    As for redux it might be easier for you to get the grasp of the basics first without RTK, but once you get the hang of it, make sure to check out https://redux-toolkit.js.org/

    It reduces boilerplate so much, very similar to the "Ducks" pattern with redux.

    1. 2

      I think I agree with this... I think redux is sufficiently complicated that it would be better to learn vanilla redux first then rtk later.

      I do love rtk, it’s definitely the best way to do redux.

    2. 1

      Yep, I’m gonna learn that in a few days. Thanks for the tip!

  3. 2

    If you're using hooks can just skip redux I believe.

    1. 3

      Not really, they solve different problems, useState is for local state, Redux is for global state. If you mean the context API, ie useContext, context is not the same as state management, and context will re-render everything it's attached to.

      1. 1

        Most folks I know who write about hooks are using something other than Redux.

        Something like https://github.com/tannerlinsley/react-query

        Or they're using graphql and have some client side library to handle most of the state.

        I have a huge app that still uses classes so Redux is still best for me I believe.

        https://dev.to/g_abud/why-i-quit-redux-1knl

        1. 1

          Ah I see what you mean, yes you're right you can use other client side state management libraries. I thought you meant using only hooks instead of any state management library.

          1. 1

            Folks always say redux is overkill, and I can see that for basic projects. It also scares people from learning react.

            Mobx use to be recommended a lot.

    2. 2

      Same as @krakz. We use both redux and state in our app as we have some elements that need to be shared across components. Redux simplifies a lot of things and the only caveat is to make sure you don't trigger unnecessary renders.

      1. 1

        Did you look at https://github.com/tannerlinsley/react-query and if so why didn't you use that?

        1. 2

          Looks really interesting but as I understanding it from the docs this is more about communicating with your backend? In my case the need is more around shared state between components (with or without having to use a backend).

          I feel like I could probably replace some of our redux state with react-query but I don't think that we can remove redux alltogether (similar to https://react-query.tanstack.com/docs/guides/does-this-replace-client-state). Might give that a try, thanks!

          1. 1

            Coming back to say thanks! Just tried react-query on a new component and there's a lot that I'll be able to move out of Redux as in most cases the data is only relevant for the current view.

            🙏👊

        2. 1

          Pullstate and Flux as well could be considered here. Very lightweight and simple global state management

    3. 2

      Redux is still better for global state management imo, I use both Redux and Context in my app depending on needs.

      You can use Redux with hooks.

      https://www.reddit.com/r/reactjs/comments/fvzgm0/is_redux_worth_it_in_2020/fmlb730/?utm_source=reddit&utm_medium=web2x&context=3

      1. 0

        Did you look at https://github.com/tannerlinsley/react-query and if so why didn't you use that?

        1. 2

          I haven't but it looks interesting, will check it out!

          Update: I have checked it out and it looks amazing. It's not something that replaces redux but depending on the use case you might not need redux in your application at all and you can just go with react-query (or use it along with redux/any other global state management, again, depending on the use case)

          They explain it nicely in their own docs: https://react-query.tanstack.com/docs/guides/does-this-replace-client-state

          I'd say react-query and redux are two completely different things, but many people slap redux into their apps only for things that react-query could handle just fine. This is really cool though, I will definitely use it in the future!

    4. 1

      Well when I learn Redux, I am not going to use it in the current crm application. I will probably make a different tool to showcase my understanding.

  4. 1

    Kudos for learning something new!
    React hooks certainly change react development!
    About redux, I'd encourage you to learn it, because it's often required, but I consider myself anti redux. Try to learn context API to manage states, instead! At least in a small app

  5. 1

    Haha glad to hear the tips helped. Keep it up!

  6. 1

    I can't say enough good things about unstated-next. Redux is a waste of time for me.

    It's such a clean way to manage state. It's built on top of Context I'm pretty sure. useState for local state and unstated-next containers for everything else.

    1. 1

      Ok, thanks for the suggestion. I’ll be sure to try it out sooner than later ;D

  7. 1

    I started to love Reactjs after know hooks. before I didn't understand it. Glad you learned it

    1. 2

      Thanks. Best of luck to you too!

  8. 1

    Hooks or not Managing state React remains a total mess.

  9. 1

    Very nice 👏 Hooks changed my whole way of thinking with React. Absolutely amazing.

    As for redux etc which I've seen in alot of comments..

    Worth checking out Pullstate or Flux. Simple lightweight global state management. Unless you're building a huge application, redux is overkill, with Pullstate and flux there are less re renders, less processing, meaning a faster, more efficient site/app, albeit by a few hundredths of a sec @BraydenTW

    I'm gonna be covering react in the next few weeks on my YouTube channel!
    👉 Check it out here Alan Montgomery - Coding Tutorials. 👈

    So happy for you! 💪😎

    1. 2

      Cool! Thanks so much!

      1. 1

        Not a problem! If you check out my youtube be sure to sub and comment so you don't miss my upcoming content 🐱 Just getting started but i've a good feeling 🦸‍♂️

        1. 2

          Nice channel btw. Just subbed. Can’t wait for more videos!

          1. 1

            Wow nice one @BraydenTW Appreciate the kind words! Hopefully getting another one released today!

            1. 1

              Cool! I’ll be sure to check it out :)

  10. 0

    Don't bother with Redux. It's useful for very small number of applications. State and context are enough for 99% problems.

    You may also look at tailwindcss. IMO best companion to React apps. Styled Components are overrated.

    P.S. Building React apps for 5 years 😀.

    1. 1

      Got it. I’ve been confused with if I should try Redux or not.

      Just wondering, why do you like Tailwind more then Styled Components?

      1. 1
        1. Naming things. Specifically no need to do that before I finally find a good one 🥰. In styled components you are forced to give a name to every style variation.

        2. Built-in design system. Tailwind provides you color palette, spacing, typography and some layout primitives out of the box.

        3. Easy to override styles (good luck with that in styled components).

        In general I'm 10x productive using tailwind that styled components. And what's the most interesting, I hardly write any css. Last project has a single utility css module with less than 10 new css classes. Magic!

        1. 2

          Very cool! That about does it for me with Tailwind :)

          I’ll try it out this weekend :D

Trending on Indie Hackers
📈 We raised $500K pre-seed for our Reddit Marketing Tool 33 comments Event-based customer knowledge base - what do you think? 23 comments Building a Shopify clone🤪 (it's for a one-time small fee, no recurring fees/commissions🤩). 7 comments After many failed attempts, I bootstrapped a document translation service to $10K MRR in 6 months, AMA! 7 comments Free 7-day Twitter growth cohort 6 comments Launched my first product on PH 🎉 🎉! An affordable AI content creation tool. 4 comments