Sign in

Frontend Engineer, JavaScript enthusiast, DJ, writer and minimalist. Develops things at heycar — JS, React, React Native, Next.js.

One of the most common React Hooks that I’ve found myself using is one to handle API calls. Often we see ourselves writing almost the same exact codes in more than one different component. Ideally what we could do in such cases would be to extract that recurrent logic into a reusable piece of code (hook) and reuse it where the need be.

I am going to use Fetch API for the HTTP calls. You can use axios as well, it’s up to you.

  • Loading Indicator
  • Error Handling
  • Using On didMount or Some After
  • Dynamic Url
  • Dynamic Parameters
  • Manual Refetch

Photo by Kelly Sikkema on Unsplash

2020 is probably the best and the worst year I’ve ever had. I’ll try to summarize my notions about it.

An unexpected COVID-19 pandemic caught our lives unawares. Some of us lost our family, friends, and familiars, some of us couldn’t accomplish our goals.

I still remember the day that my company at that time sent us to our homes for an unknown date. We were all laughing and making jokes about it and thinking that people are just exaggerating it. Well, it turns out we all got mistaken. People started to get sick and die every day and we…

Photo by Kadir Celep on Unsplash

Sorry to inform you guys this article has been written fully in Turkish since it’s all about me and my immigration story from Istanbul to Berlin. Thank you for your understanding.

Hikayemin ilk bölümünde şimdilik teknik detaylara (vize süreci, iş bulma, CV hazırlama vs. gibi) girmeden bu kararı almamın altında yatan başlıca sebepleri kendimce açıklamaya ve kendimi tanıtmaya çalışacağım.

Photo by Fredy Jacob on Unsplash

Many new features are released in React v16.6.0. React.memo is one of the cool features in it. memo means memorizing. This is a performance optimization feature for the function components. React.memo() is similar to PureComponent that it will help us control when our components re-render.

Components will only re-render if its props have changed! Normally all of our React components in our tree will go through a render when changes are made. With PureComponent and React.memo(), we can have only some components render.

memo has made it easier to avoid the continuous rendering process that we could do with the…

Photo by Alina Grubnyak on Unsplash

You’ve already learned a lot about the <video> element in my previous article “What I’ve Learned From Working With HTML5 Video Over A Month”, but did you know that the <video> and <canvas> elements would be a great choice to use together? In fact, the two elements are absolutely wondrous when you combine them! I’m going to show you a handy demo using these two elements, which I hope will prompt cool future projects from you.

Firstly, place the <video> and <canvas> elements in your HTML. Give your dimensions(width, height) to <canvas> according to your video. And of course, hide

Photo by Alex Knight on Unsplash

I had a chance to work with HTML5 Video in a project over a month and am going to tell you my experiences and knowledge on it.

The project is a kind of simulation of an interactive video similar to Netflix’s Bandersnatch series. The story goes upon user choices: adding tomato or pickle, choosing brioche or classic bread, whether garnishing with an egg or an avocado sauce or just skipping it, etc. You get the idea…

It’s called “Ya Sen Yapsan”, means “What If You Do It” in Turkish. You can try it from here. …

Photo by Michael Browning on Unsplash

Approximately more than 85% of our visitors access from mobile browsers.

Most of us have used a slider at least once in the components or somewhere in projects. In, we were using react-slick which works well on desktop but causes some performance and memory leak problems on mobile browsers.

See here:

It was causing a freezing bug while scrolling and tapping the hamburger menu that affects user experience extremely bad. Also, the bundle size for react-slick is 14.5kB minified + gzipped.

Photo by Jessica Felicio on Unsplash

Here are 4 ways to remove duplicates from an array and return only the unique values.

1. Set

Set is one of the cool thing happening in ES6. It’s a new data structure that stores unique values of any type. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set’s collection.

2. Filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

3. Reduce

In order to find out this option, let’s understand what these two…

Photo by Henry Be on Unsplash

I love using Flickity, it’s great and super easy to use. But… When I started to work with React and need Flickity, things got pretty confusing. So I started to look for a component style library but find nothing effective. And built mine…

#1. Install flickity 👾

You can install flickity with;

yarn add flickity


npm install flickity --save

#2. Create a file called Slider.js ✍

Slider.js file will contain Flickity configurations. You can of course name it as you want but be careful with naming component name and then importing also 😜

Slider.js component for Flickity

Voilà! You’ve made it! 😍

#3. Use it in a component 😊

Home.js example component

Thanks for reading! 💛

I’m Onur Şuyalçınkaya, Front End Developer at Yemeksepeti and Co-Founder of Minimap. Feel free to connect with me via Twitter and LinkedIn.

Onur Şuyalçınkaya

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store