JSFoo 2019

On component architecture, front-end engineering and Developer Experience (DX)

Better Coding with React Hooks

Submitted by pulkit k (@kpulkit29) on May 28, 2019

Section: Crisp talk (20 mins) Technical level: Intermediate Status: Waitlisted

Abstract

Developers have been conveniently using the react to build scalable modern websites.But what looks simple from outside might have its own complicated story. So is the case with class based components.They can easily get pretty lengthy ,complex and the native lifecycle methods have some side-effects.Here comes react hooks to save the day .The presentation will walk through the benefits of using react hooks over the class components.
Key takeaway for the audience :-
1. Existing problem with React’s structure.
2. How Hooks come to save the day.
3. Faster and cleaner development with react hooks.

Outline

I would like to break my talk in the following stages :-

1.Intorduction to React Hooks

2.React Hooks vs Class based components

3.A small live code demo to highight react hooks benefits

4.Conclusion

Requirements

Experience of working with React

Speaker bio

Hi I am Pulkit ,currently a final year engineering student at IPU,Delhi.I recently interned with Magicpin (one of India’s biggest lifestyle based apps) and have joined Wingify as a Software Engineer recently.Having done similar internships in the past and having done some extensive javascript based projects I feel this would be a perfect opportunity for me to share my knowledge.Moreover I have been reading about React Hooks (a latest trend in react) since it was first introduced in 2018 and I believe that through this session a lot of other developers would clearly understand how react hooks can change the way we look at react.

Links

Slides

https://drive.google.com/open?id=16DWcPoZH0afohkW5wcz54d-VpHW_KUWs0ge0nUpUtMw

Preview video

https://www.youtube.com/watch?v=hVwhGzH95yk

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('You need to be a participant to comment.') }}

{{ formTitle }}
{{ gettext('Post a comment...') }}
{{ gettext('New comment') }}

{{ errorMsg }}