From 90691693f6744e50e1cb23114693e81acc7ff402 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Wed, 25 Sep 2019 11:35:03 -0300
Subject: [PATCH] fix(@clayui/slider): avoid async rendering to render
 synchronous changes before repaint

---
 packages/clay-slider/src/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/clay-slider/src/index.tsx b/packages/clay-slider/src/index.tsx
index f0b28e73a1..005c430b69 100644
--- a/packages/clay-slider/src/index.tsx
+++ b/packages/clay-slider/src/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import classNames from 'classnames';
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useLayoutEffect, useRef, useState} from 'react';
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	/**
@@ -92,7 +92,7 @@ const ClaySlider: React.FunctionComponent<IProps> = ({
 	const sliderRef = useRef<HTMLInputElement | null>(null);
 	const thumbRef = useRef<HTMLDivElement | null>(null);
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (sliderRef.current && thumbRef.current) {
 			const thumbWidth = thumbRef.current.clientWidth;